/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

.ember-power-select-trigger,
.dropdown-trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.375em 16px 0.375em 0.3em;
  line-height: 1;
  border-radius: $radius;
  box-shadow: $button-box-shadow-standard;
  background: $white-bis;
  border: 1px solid $grey-light;
  height: 2.25em;
  font-size: 1rem;
  outline: none;
  cursor: pointer;

  &:focus {
    box-shadow: $button-box-shadow-standard, inset 0 0 0 2px $grey-lighter;
  }

  &.is-outlined {
    border-color: rgba($white, 0.5);
    color: $white;
    background: transparent;
    box-shadow: $button-box-shadow-standard, 0 0 2px 2px rgba($black, 0.1);

    .ember-power-select-status-icon {
      border-top-color: rgba($white, 0.75);
    }

    .ember-power-select-prefix {
      color: rgba($white, 0.75);
    }
  }

  &.is-compact {
    margin: -0.25em 0;

    &.pull-right {
      margin-right: -1em;
    }

    &.pull-left {
      margin-left: -1em;
    }
  }
}

.button-bar {
  display: inline-flex;
  flex-direction: row;
  box-shadow: $button-box-shadow-standard;

  .dropdown,
  .button {
    display: flex;
    position: relative;

    & + .dropdown,
    & + .button {
      margin-left: -1px;
    }
  }

  .ember-power-select-trigger,
  .dropdown-trigger,
  .button {
    border-radius: 0;
    box-shadow: none;

    &:focus {
      box-shadow: inset 0 0 0 2px $grey-lighter;
    }
  }

  // Buttons have their own focus treatment that needs to be overrided here.
  // Since .button.is-color takes precedence over .button-bar .button, each
  // color needs the override.
  .button {
    @each $name, $pair in $colors {
      &.is-#{$name}:focus {
        box-shadow: inset 0 0 0 2px $grey-lighter;
      }
    }
  }

  .dropdown:first-child .ember-power-select-trigger,
  .dropdown:first-child .dropdown-trigger,
  .button:first-child {
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
  }

  .dropdown:last-child .ember-power-select-trigger,
  .dropdown:last-child .dropdown-trigger,
  .button:last-child {
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  &.is-shadowless {
    box-shadow: none;
  }

  // Used to minimize any extra height the buttons would add to an otherwise
  // text only container.
  &.is-text {
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    vertical-align: middle;
  }
}

.ember-power-select-selected-item,
.dropdown-trigger-label {
  margin-left: 8px;
  margin-right: 8px;
  display: inline-block;
  white-space: nowrap;
}

.ember-power-select-selected-item,
.dropdown-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ember-power-select-prefix,
.dropdown-prefix {
  color: $grey;
}

.ember-power-select-option,
.dropdown-option {
  .ember-power-select-prefix,
  .dropdown-prefix {
    display: none;
  }
}

.dropdown-options,
.ember-power-select-options {
  margin: 0;
  padding: 0;
}

// Bulma override
.menu-list li ul.ember-power-select-options {
  margin: 0;
  padding: 0;
}

.dropdown-options {
  border: 1px solid $grey-light;
  margin-top: -1px;
  max-height: 400px;
  overflow: auto;

  & > ul {
    width: 100%;
  }

  // ember-power-select@v4.1.3: There is currently no way to set a class
  // on an individual option, so .ember-power-select-option must be included
  // in these selectors.
  .dropdown-option,
  .ember-power-select-option {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    line-height: 1.75;

    label,
    .dropdown-label {
      display: block;
      padding: 3px 8px;
      min-width: 100px;
      cursor: pointer;
    }

    & + .dropdown-option,
    & + .ember-power-select-option {
      border-top: 1px solid $grey-lighter;
    }

    &:hover,
    &:focus,
    &[aria-current='true'],
    &[aria-selected='true'] {
      background: $white-bis;
      color: $black;
      outline: none;
      border-left: 2px solid $blue;
      label,
      .dropdown-label {
        padding-left: 6px;
        min-width: 98px;
      }
    }

    &[aria-selected='true'] {
      background: $blue-050;
    }
  }

  .dropdown-empty {
    display: block;
    padding: 8px 12px;
    color: $grey-light;
  }
}