@import '../init/breakpoints';

$emote-item-size--small: 2.5rem;
$emote-item-size--big: 3rem;
$sticker-item-size: 5rem;

// -- EMOJIS --
.selector-menu {
  overflow-y: scroll;
  overflow-x: hidden;

  @media (min-width: $breakpoint-small) {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    max-height: 25vh;
    padding: var(--spacing-xs);
  }

  @media (max-width: $breakpoint-small) {
    max-height: 30vh;
    padding-top: var(--spacing-s);

    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
}

.emote-selector__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, $emote-item-size--small);
  justify-items: center;
  justify-content: space-evenly;

  button {
    margin: 0px !important;
    padding: var(--spacing-xs);
    height: unset;

    &:first-child {
      margin-right: 0px;
    }

    @media (max-width: $breakpoint-small) {
      &:focus,
      &:hover {
        background-color: transparent !important;
      }
    }

    @media (min-width: $breakpoint-small) {
      padding: var(--spacing-s);
    }
  }

  @media (min-width: $breakpoint-small) {
    grid-template-columns: repeat(auto-fit, $emote-item-size--big);
  }
}

// -- STICKERS --
.selector-menu--stickers {
  @extend .selector-menu;
  padding-top: 0px;

  @media (min-width: $breakpoint-small) {
    border: 0;
  }
}

.sticker-selector__items {
  @extend .emote-selector__items;
  grid-template-columns: repeat(auto-fit, $sticker-item-size);

  .button--file-action {
    overflow: hidden;
    margin: unset;
    padding: var(--spacing-xs);
    height: unset;

    .sticker-item--priced {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        margin-bottom: var(--spacing-s);
      }

      .superChat--light {
        position: absolute;
        display: inline;
        bottom: 0;
        .credit-amount {
          color: var(--color-primary-contrast) !important;
        }
      }
    }

    img {
      margin: 0px;
    }
  }
}

.sticker-selector__row-title {
  font-size: var(--font-small);
  padding-left: var(--spacing-xxs);
  width: 100%;
  text-align: center;
  position: sticky;
  top: 0px;
  background-color: var(--color-tabs-background);
  border-radius: var(--border-radius);
  font-weight: 900;
  z-index: 1;

  @media (min-width: $breakpoint-small) {
    padding-top: var(--spacing-xs);
  }

  @media (max-width: $breakpoint-small) {
    font-size: var(--font-xsmall);
  }
}