hensei-web/components/common/Popover/index.module.scss

.popover {
  animation: scaleIn $duration-zoom ease-out;
  background: var(--dialog-bg);
  border-radius: $card-corner;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  outline: none;
  padding: $unit;
  transform-origin: var(--radix-popover-content-transform-origin);
  width: var(--radix-popover-trigger-width);
  z-index: 5;

  @include breakpoint(phone) {
    min-width: auto;
  }

  &.raid {
    width: auto;
  }

  &.flush {
    padding: 0;
  }
}

.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;

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

  &.small {
    & > .value {
      font-size: $font-small;
      margin: 0;
      max-width: 200px;
    }

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

      & > .value {
        display: block;
        width: 100%;
        max-width: inherit;
        text-align: center;
      }
    }
  }

  &.bound.raid {
    &.highlighted .value {
      color: var(--text-primary);
    }

    &:not(.highlighted) .value.empty {
      color: var(--text-tertiary);
    }
  }

  .value {
    display: flex;
    gap: $unit-half;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden;

    & > span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

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

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

  &.hidden {
    display: none;
  }

  &.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;
  }

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

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

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

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

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

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

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

  // span:not(.icon) {
  //   color: var(--text-secondary);
  // }

  @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] {
}