@import '../init/breakpoints';

.emoteSelector {
  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);
}

.emoteSelector__list {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 25vh;
  padding: var(--spacing-s);
  background-color: rgba(var(--color-primary-dynamic), 0.01);
  border-radius: var(--border-radius);

  .emoteSelector__listRowItems {
    display: flex;
    flex-wrap: wrap;

    .button--file-action {
      margin: var(--spacing-xxs);
      padding: var(--spacing-xs);

      .button__content {
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 1.5rem;
        height: 1.5rem;

        .button__label {
          line-height: normal;
        }

        span {
          margin: auto;
          font-size: var(--font-large);
        }
      }
      &:hover {
        background-color: rgba(var(--color-primary-dynamic), 0.2) !important;
      }
    }
  }
}