//
// Copyright IBM Corp. 2019, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@import 'carbon-components/scss/components/combo-box/combo-box';
@import 'carbon-components/scss/components/form/form';
@import 'carbon-components/scss/components/text-input/text-input';

:host(#{$prefix}-combo-box) {
  outline: none;

  .#{$prefix}--assistive-text {
    // Hides screen reader cursor
    left: -100%;
    top: -100%;
  }

  .#{$prefix}--label[hidden] {
    display: none;
  }

  .#{$prefix}--list-box__field,
  // To get more specifity than:
  // https://github.com/carbon-design-system/carbon/blob/v10.16.0/packages/components/src/components/list-box/_list-box.scss#L126
  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
    padding: 0;
  }

  .#{$prefix}--list-box__menu {
    top: 100%;
    margin-top: 1px;
  }
}

:host(#{$prefix}-combo-box[type='inline']) {
  @extend .#{$prefix}--list-box__wrapper--inline;

  .#{$prefix}--list-box__field {
    padding-left: 0;
  }

  .#{$prefix}--text-input {
    border-bottom: none;
  }
}

:host(#{$prefix}-combo-box-item) {
  @extend .#{$prefix}--list-box__menu-item;

  display: block;

  .#{$prefix}--list-box__menu-item__option {
    height: 100%;
  }
}

:host(#{$prefix}-combo-box-item[size='sm']) {
  height: rem(32px);

  .#{$prefix}--list-box__menu-item__option {
    padding-top: rem(7px);
    padding-bottom: rem(7px);
  }
}

:host(#{$prefix}-combo-box-item[size='xl']) {
  height: rem(48px);

  .#{$prefix}--list-box__menu-item__option {
    padding-top: rem(15px);
    padding-bottom: rem(15px);
  }
}

:host(#{$prefix}-combo-box-item[disabled]) .#{$prefix}--list-box__menu-item__option {
  color: $disabled-02;
  text-decoration: none;
}

:host(#{$prefix}-combo-box-item[highlighted]) {
  @extend .#{$prefix}--list-box__menu-item--highlighted;
}

:host(#{$prefix}-combo-box-item[selected]) {
  @extend .#{$prefix}--list-box__menu-item--active;
  @extend .#{$prefix}--list-box__menu-item--highlighted;

  .#{$prefix}--list-box__menu-item__option {
    color: $text-01;
  }

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