.trigger {
  align-items: center;
  background-color: var(--input-bg);
  border-radius: $input-corner;
  border: 2px solid transparent;
  display: flex;
  gap: $unit;
  padding: ($unit * 1.5) $unit-2x;
  white-space: nowrap;

  &.small {
    & > span:not(.icon) {
      font-size: $font-small;
      margin: 0;
      max-width: 200px;
    }

    @include breakpoint(tablet) {
      &::before {
        content: '';
        display: block;
        width: calc($unit-2x - 1px);
      }

      & > span:not(.icon) {
        width: 100%;
        max-width: inherit;
        text-align: center;
      }
    }
  }

  &.grow {
    flex-grow: 1;
  }

  &.left {
    flex-grow: 1;
    width: 100%;
  }

  &.right {
    flex-grow: 0;
    text-align: right;
    min-width: 12rem;
  }

  &.bound {
    background-color: var(--select-contained-bg);

    &:hover {
      background-color: var(--select-contained-bg-hover);

      &.disabled {
        background-color: var(--select-contained-bg);
      }
    }
  }

  &.full {
    width: 100%;
  }

  &.table {
    min-width: $unit * 30;

    @include breakpoint(phone) {
      width: 100%;
    }
  }

  &.hidden {
    display: none;
  }

  &:hover {
    background-color: var(--input-bg-hover);
    cursor: pointer;

    span:not(.icon),
    &[data-placeholder] > span:not(.icon) {
      color: var(--text-primary);
    }

    .icon svg {
      fill: var(--text-primary);
    }
  }

  &.disabled:hover {
    background-color: var(--input-bg);
    cursor: not-allowed;
  }

  &[data-placeholder='true'] > span:not(.icon) {
    color: var(--text-secondary);
  }

  & > span:not(.icon) {
    color: var(--text-primary);
    flex-grow: 1;
    font-size: $font-regular;
    text-align: left;
  }

  img {
    width: $unit-4x;
    height: auto;
  }

  .icon {
    display: flex;
    align-items: center;

    svg {
      fill: var(--icon-secondary);
    }
  }
}

.select {
  animation: scaleIn $duration-zoom ease-out;
  background: var(--dialog-bg);
  border-radius: $card-corner;
  border: 1px solid rgba(0, 0, 0, 0.24);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  padding: 0 $unit;
  min-width: var(--radix-select-trigger-width);
  transform-origin: var(--radix-select-content-transform-origin);
  max-height: 40vh;
  z-index: 40;

  &.bound {
    background-color: var(--select-content-contained-bg);
  }

  .scroll.up,
  .scroll.down {
    padding: $unit 0;
    text-align: center;

    &:hover svg {
      fill: var(--icon-secondary-hover);
    }

    svg {
      fill: var(--icon-secondary);
    }
  }

  .scroll.up {
    transform: scale(1, -1);
  }

  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    20% {
      opacity: 0.2;
      transform: scale(0.4);
    }
    40% {
      opacity: 0.4;
      transform: scale(0.8);
    }
    60% {
      opacity: 0.6;
      transform: scale(1);
    }
    65% {
      opacity: 0.65;
      transform: scale(1.1);
    }
    70% {
      opacity: 0.7;
      transform: scale(1);
    }
    75% {
      opacity: 0.75;
      transform: scale(0.98);
    }
    80% {
      opacity: 0.8;
      transform: scale(1.02);
    }
    90% {
      opacity: 0.9;
      transform: scale(0.96);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

[data-radix-popper-content-wrapper] {
}
