@import '../../vendor/carbon-components/scss/components/dropdown/dropdown';

@import '../../globals/vars';

.#{$iot-prefix}--dropdown__image-button:hover {
  border-color: transparent;

  ::before {
    opacity: 0;
  }
}

.#{$iot-prefix}--icon-dropdown__footer {
  @include box-shadow();
  outline: 1px solid $focus;
  position: absolute;

  background-color: $ui-01;
  z-index: 5999; // dropdown z-index is 6000, this needs to render just below
  width: 100%;

  &-content {
    padding: $spacing-03;
  }
}

.#{$iot-prefix}--icon-dropdown__selection-buttons {
  > .#{$prefix}--list-box__field {
    padding: 0 $spacing-09 0 $spacing-05;
  }

  > .#{$prefix}--list-box__menu {
    transition: initial;
    box-shadow: none;
    outline-style: none;
    border: none;

    > .#{$prefix}--list-box__menu-item--active {
      background: transparent;
    }

    > .#{$prefix}--list-box__menu-item.#{$prefix}--list-box__menu-item--highlighted {
      background: transparent;

      &:hover {
        > .bx--list-box__menu-item__option {
          > .#{$iot-prefix}--dropdown__image-button {
            border-color: transparent;
          }
        }
      }

      > .bx--list-box__menu-item__option {
        > .#{$iot-prefix}--dropdown__image-button {
          border-color: $focus;
        }
      }
    }

    > .#{$prefix}--list-box__menu-item {
      display: inline-flex;
      height: min-content;

      > .#{$prefix}--list-box__menu-item__option {
        overflow: visible;
        border: none;
        height: min-content;
        padding: 0;
        margin: 0;

        display: flex;
        align-items: center;
        justify-items: center;

        &:hover {
          background: $hover-ui;
        }

        > .#{$iot-prefix}--icon-dropdown__selected-icon-label {
          display: none;
        }

        > .#{$prefix}--list-box__menu-item__selected-icon {
          display: none;
        }

        > .#{$iot-prefix}--icon-dropdown__image-button {
          border-width: 1px;
          border-style: solid;
          border-top-color: transparent;
          border-right-color: $ui-03;
          border-bottom-color: $ui-03;
          border-left-color: transparent;

          color: transparent;

          &--leading {
            border-left-color: transparent;
          }

          &--trailing {
            border-right-color: transparent;
          }

          &--bottom {
            border-bottom-color: transparent;
          }

          &--top {
            border-top-color: $ui-03;
          }

          &:hover {
            color: transparent;
          }

          > .bx--assistive-text {
            display: none;
          }
        }
      }
    }
  }

  .#{$prefix}--list-box__label {
    > .#{$iot-prefix}--icon-dropdown__image-button {
      display: none;
    }

    > .#{$iot-prefix}--icon-dropdown__text {
      height: 100%;
    }
  }
}

.#{$iot-prefix}--icon-dropdown__selected-icon-label {
  display: flex;
  height: 100%;

  > svg {
    min-width: 16px;
    width: 16px;
    height: 100%;
  }

  &__content {
    margin: auto $spacing-03;

    overflow: hidden;
    text-overflow: ellipsis;

    &--open {
      color: $active-ui;
    }
  }
}