@use '../../../styles/mixins';

.root {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
}

.buttonsContainer {
  scrollbar-color: rgba(0, 0, 0, 0);
  scrollbar-width: none;

  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 100%;

  white-space: nowrap;

  @include mixins.gradient-border-horizontal(0.25rem, 0.25rem);

  &::-webkit-scrollbar {
    height: 0;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
}

.dropdownArrows {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 0.625rem;
  height: 1rem;
  margin-inline-start: 0.25rem;
}

.arrowLine {
  /* stylelint-disable-next-line plugin/whole-pixel */
  --x: 1.5px;
  --y: 0.25rem;
  --a: 45deg;

  position: absolute;

  /* stylelint-disable-next-line plugin/whole-pixel */
  width: 1.5px;
  height: 0.3125rem;
  border-radius: 1px;

  background-color: currentcolor;

  transition: transform 0.2s ease-in-out;

  &.topLeft {
    transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y))) rotate(var(--a));
  }

  &.topRight {
    transform: translate(var(--x), calc(-1 * var(--y))) rotate(calc(-1 * var(--a)));
  }

  &.bottomLeft {
    transform: translate(calc(-1 * var(--x)), var(--y)) rotate(calc(-1 * var(--a)));
  }

  &.bottomRight {
    transform: translate(var(--x), var(--y)) rotate(var(--a));
  }

  &.open.topLeft {
    transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y))) rotate(calc(-1 * var(--a)));
  }

  &.open.topRight {
    transform: translate(var(--x), calc(-1 * var(--y))) rotate(var(--a));
  }

  &.open.bottomLeft {
    transform: translate(calc(-1 * var(--x)), var(--y)) rotate(var(--a));
  }

  &.open.bottomRight {
    transform: translate(var(--x), var(--y)) rotate(calc(-1 * var(--a)));
  }
}

.sticker {
  margin-inline-start: 0.375rem;
}

.backdropAttributeMenuItemText,
.menuItemStickerText,
.menuItemText {
  flex-grow: 1;
}

.menuItemStickerText {
  margin-inline-start: 1.125rem;
}

.backdropAttributeMenuItemText {
  margin-inline-start: 3rem;
}

.menuItemCount {
  margin-inline-start: 0.5rem;
  color: var(--color-text-secondary);
}

.backdrop {
  position: absolute;
  left: 0.625rem;

  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.menuItemIcon {
  margin-inline: 0 !important;
  margin-inline-start: 0.5 !important;
}

.itemIcon {
  margin-inline-end: 0.125rem;
  font-size: 1.125rem !important;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  margin-inline: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;

  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;

  background-color: var(--color-background-secondary);

  transition: 0.15s background-color;

  &:hover {
    cursor: pointer;
    background-color: var(--color-background-secondary-accent);
  }
}

.menuContentContainer {
  overflow-y: scroll;
  max-height: 20rem;
}

.menu {
  :global(.bubble) {
    top: 2.25rem !important;
  }

  :global(.MenuItem) {
    :global(.icon) {
      color: var(--color-text);
    }
  }

  &.left {
    :global(.bubble) {
      right: auto !important;
      left: 0.125rem !important;
    }
  }
  &.right {
    :global(.bubble) {
      right: 0.125rem !important;
      left: auto !important;
    }
  }

  :global(.SearchInput) {
    --color-placeholders: var(--color-text-secondary);

    width: 15rem;
    border: none;
    border-bottom: 0.0625rem solid var(--color-borders);
    border-radius: 0;

    background-color: transparent;

    :global(.form-control) {
      caret-color: var(--color-icon-secondary);
    }

    :global(.icon) {
      color: var(--color-icon-secondary);
    }

    input {
      padding-left: 1.25rem;
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
    }

    :global(.icon-container-left) {
      width: 1.25rem;
      margin-inline-start: 1rem;
    }
  }

  :global(.icon) {
    font-size: 1.25rem !important;
    color: var(--color-text);
  }
}
