threshold-ui/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@use '../../variables/sizing';
@use '../../utilities/type';

$xs: sizing.rems(xs); // 8
$xxs: sizing.rems(xxs); // 4
$chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");

.rose-dropdown {
  --background-image-light: #{$chevron};
  --background-image-dark: #{$chevronWhite};

  --background-image: var(--background-image-light);

  .ember-application.rose-theme-light & {
    --background-image: var(--background-image-light);
  }

  @media (prefers-color-scheme: dark) {
    --background-image: var(--background-image-dark);
  }

  .ember-application.rose-theme-dark & {
    --background-image: var(--background-image-dark);
  }

  position: relative;
  display: inline-block;
  vertical-align: middle;

  .rose-dropdown-trigger {
    @include type.type(button, semibold);
    cursor: default;
    overflow: hidden;
    $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
    padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l);
    color: var(--stark);
    border-radius: sizing.rems(xxxs);
    white-space: nowrap;

    // Hide default twistie triangle
    // Webkit / Chromium
    &::-webkit-details-marker {
      display: none;
    }
    // Firefox
    list-style-type: none;
    &::marker {
      display: none;
    }

    background-size: sizing.rems(m);

    &:hover {
      background-color: var(--ui-gray-subtler-5);
    }

    &:not(.has-icon-only) .rose-icon:first-child {
      margin-left: -(sizing.rems(xs));
      margin-right: sizing.rems(xxs);
    }

    &.has-icon-only {
      padding-left: sizing.rems(s);
      padding-right: sizing.rems(s);
      background-position: right sizing.rems(xs) center;

      .rose-dropdown-trigger-text {
        position: absolute;
        top: -1000px;
        left: -1000px;
        width: 1px;
        height: 1px;
        opacity: 0;
      }
    }

    &.show-caret {
      padding-right: sizing.rems(xl);
      background: var(--background-image);
      background-repeat: no-repeat;
      background-position: right sizing.rems(m) center;
      background-size: sizing.rems(m);
    }

    // Hide default twistie triangle
    // Webkit / Chromium
    &::-webkit-details-marker {
      display: none;
    }
    // Firefox
    list-style-type: none;
    &::marker {
      display: none;
    }
  }

  &[open] > .rose-dropdown-trigger {
    background-color: var(--ui-gray-subtler-4);
  }

  .rose-dropdown-content {
    position: absolute;
    padding: $xxs 0;
    border: 1px solid var(--ui-gray-subtler-2);
    border-radius: sizing.rems(xxxs);
    background: var(--subtle);
    box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)),
      0 $xxs $xs rgba(var(--stark-components), var(--opacity-4));
    z-index: 99;
  }

  &.rose-dropdown-right {
    .rose-dropdown-content {
      right: 0;
    }
  }

  .rose-dropdown-separator {
    background-color: var(--ui-gray-subtler-3);
    height: sizing.rems(xxxxs);
    border: none;
    margin: $xxs 0;
  }

  // Styles for condensed verion. Some are overrides
  &.rose-dropdown-condensed {
    --background-image: #{$chevronGrey};
    border: sizing.rems(xxxxs) solid var(--ui-border);
    border-radius: sizing.rems(xxs);

    .rose-dropdown-trigger {
      color: var(--ui-gray-starker-1);
      padding: 0 sizing.rems(s); // To clear the inherit padding.

      &.show-caret {
        padding-right: sizing.rems(l) + sizing.rems(xs); // 32
        background-position: right sizing.rems(xs) center;
      }
    }

    .rose-dropdown-content {
      border: none;
      border: sizing.rems(xxxxs) solid var(--ui-border);
    }
  }
}