@import '../init/breakpoints';

.stickerSelector {
  animation: menu-animate-in var(--animation-duration) var(--animation-style);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-m);

  .stickerSelector__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-s);
    margin-bottom: 0;
    align-items: center;
    padding: var(--spacing-xxs);

    .stickerSelector__headerTitle {
      padding: 0;
    }
  }

  .navigation__wrapper {
    height: unset;
    border-left: 1px solid var(--color-border);

    .navigation-links {
      li {
        .button {
          padding: unset;

          .button__content {
            justify-content: unset;
            flex-direction: unset;
            width: unset;

            .button__label {
              font-size: var(--font-small);
              margin: 0 var(--spacing-s);
            }
          }
        }
      }
    }
  }
}

.stickerSelector__list {
  display: flex;

  .stickerSelector__listBody {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 25vh;
    padding: var(--spacing-s);

    .stickerSelector__listBody-rowItems {
      display: flex;
      flex-wrap: wrap;
      overflow-y: scroll;
      overflow-x: hidden;

      .button--file-action {
        width: 5.5rem;
        height: 6rem;
        overflow: hidden;
        margin: unset;
        padding: var(--spacing-xxs);

        .stickerItem--paid {
          display: flex;
          flex-direction: column;
          align-items: center;

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

          .superChat--light {
            position: absolute;
            display: inline;
            bottom: 0;
          }
        }

        img {
          margin: auto;
        }

        @media (max-width: $breakpoint-xsmall) {
          width: 3.5rem;
          height: 4rem;
        }
      }
    }
  }
}