signal-desktop/sticker-creator/components/StickerPackPreview.scss

@import '../mixins';
@import '../../stylesheets/variables';

@mixin background() {
  @include light-theme() {
    background: $color-white;
  }

  @include dark-theme() {
    background: $color-gray-75;
  }
}

.container {
  position: relative;
  width: 330px;
  height: 270px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.2);
  @include background();
}

.title-bar {
  height: 27px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font: {
    family: $inter;
    size: 10.5px;
    weight: 500;
  }

  @include background();

  @include light-theme {
    color: $color-gray-90;
  }

  @include dark-theme {
    color: $color-gray-05;
  }
}

.scroller {
  height: calc(100% - 27px);
  padding-bottom: 57px;
  overflow: auto;
}

.grid {
  display: grid;
  grid-gap: 6px;
  padding: 0 16px 0 12px;
  grid-template-columns: repeat(4, 1fr);
  overflow: auto;
  justify-items: center;
}

.sticker {
  width: 72px;
  height: 72px;
}

.meta {
  width: 306px;
  height: 39px;
  border-radius: 3px;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 12px;
  bottom: 12px;

  @include light-theme {
    background: $color-gray-05;
  }

  @include dark-theme {
    background: $color-gray-60;
  }
}

.text {
  font-family: $inter;
}

.meta-title {
  composes: text;
  height: 15px;
  line-height: 15px;
  font: {
    size: 12px;
    weight: 500;
  }

  @include light-theme {
    color: $color-gray-90;
  }

  @include dark-theme {
    color: $color-gray-05;
  }
}

.meta-author {
  composes: text;
  height: 14px;
  line-height: 14px;
  font: {
    size: 10px;
    weight: normal;
  }

  @include light-theme {
    color: $color-gray-60;
  }

  @include dark-theme {
    color: $color-gray-25;
  }
}