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

//-----------------------------
// List Box
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/css--helpers';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/layout';
@import '../../globals/scss/layer';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';

$list-box-width: 100%;
$list-box-height: rem(40px);
$list-box-inline-height: if(not feature-flag-enabled('components-x'), rem(32px), $list-box-height);
$list-box-menu-width: rem(300px);

@mixin listbox {
  // The overall container element for a `list-box`. Has two variants,
  // `disabled` and `inline`.
  .#{$prefix}--list-box {
    position: relative;
    width: $list-box-width;
    height: $list-box-height;
    max-height: $list-box-height;
    background-color: $field-01;
    border: none;
    box-shadow: 0 1px 0 0 $ui-05;
    cursor: pointer;
    color: $text-01;
  }

  // invalid states
  .#{$prefix}--list-box[data-invalid],
  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus {
    box-shadow: 0 2px 0 0 $support-01;
  }

  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field:focus .#{$prefix}--list-box__label {
    color: $support-01;
  }

  .#{$prefix}--list-box ~ .#{$prefix}--form-requirement {
    order: 3;
    color: $support-01;
    font-weight: 400;
    margin-top: $spacing-2xs;

    &::before {
      display: none;
    }
  }

  // Light variation for 'list-box'
  .#{$prefix}--list-box--light {
    background-color: $field-02;
  }

  // Disabled state for a `list-box`
  .#{$prefix}--list-box--disabled {
    opacity: 0.5;
  }

  .#{$prefix}--list-box--disabled,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
    cursor: not-allowed;
  }

  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item--highlighted {
    background-color: transparent;
    text-decoration: none;
  }

  // Inline variant for a `list-box`
  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
    background-color: inherit;
    width: auto;
    height: $list-box-inline-height;
    box-shadow: none;
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
    color: $brand-01;
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    padding: 0 0 0 rem(10px);
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
    position: static;
    padding: 0 $spacing-xs;
  }

  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__menu {
    top: $list-box-inline-height;
    width: $list-box-menu-width;
  }

  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'] ~ .#{$prefix}--list-box__menu {
    outline: 1px solid $brand-01;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  }

  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'],
  .#{$prefix}--list-box.#{$prefix}--list-box--inline > .#{$prefix}--list-box__field:focus {
    outline: none;
    box-shadow: none;
  }

  // The field we use for input, showing selection, etc.
  .#{$prefix}--list-box__field {
    @include button-reset;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 2rem 0 1rem;
    cursor: pointer;
  }

  .#{$prefix}--list-box__field:focus,
  .#{$prefix}--list-box__field[aria-expanded='true'] {
    outline: none;
    box-shadow: 0 2px 0 0 $brand-01;
  }

  .#{$prefix}--list-box__field[disabled] {
    outline: none;
    opacity: 0.5;
  }

  // Label for a `list-box__field`
  .#{$prefix}--list-box__label {
    @include typescale('zeta');

    color: $text-01;
    font-weight: 600;
    user-select: none;
  }

  // Menu status inside of a `list-box__field`
  .#{$prefix}--list-box__menu-icon {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 0 1rem;
    transition: transform 200ms $carbon--standard-easing;
    cursor: pointer;
  }

  .#{$prefix}--list-box__menu-icon > svg {
    fill: $brand-01;
    height: 100%;
  }

  .#{$prefix}--list-box__menu-icon--open {
    transform: rotate(180deg);
  }

  // Selection indicator for a `list-box__field`
  .#{$prefix}--list-box__selection {
    display: inline-block;
    position: absolute;
    top: 0;
    right: rem(26px);
    bottom: 0;
    height: rem(40px);
    padding: 0 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 200ms $carbon--standard-easing;
  }

  .#{$prefix}--list-box__selection > svg {
    fill: $ui-05;
    height: 100%;
  }

  .#{$prefix}--list-box__selection:focus {
    outline: 1px solid $brand-01;
  }

  // Modifier for a selection to show that multiple selections have been made
  .#{$prefix}--list-box__selection--multi {
    @include typescale('omega');

    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: $brand-01;
    height: rem(18px);
    color: white;
    line-height: 0;
    padding: rem(5px);
    margin-right: rem(10px);
    border-radius: rem(13px);
  }

  .#{$prefix}--list-box__selection--multi > svg {
    fill: white;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: rem(5px);
  }

  .#{$prefix}--list-box__selection--multi:focus,
  .#{$prefix}--list-box__selection--multi:hover {
    background-color: $hover-primary;
    outline: none;
  }

  // Descendant of a `list-box` that displays a list of options to select
  .#{$prefix}--list-box__menu {
    @include box-shadow();

    position: absolute;
    left: 0;
    right: 0;
    top: $list-box-height;
    width: $list-box-width;
    background-color: $ui-01;
    max-height: rem(120px);
    overflow-y: auto;
    z-index: z('dropdown');
  }

  // Descendant of a `list-box__menu` that represents a selection for a control
  .#{$prefix}--list-box__menu-item {
    @include typescale('zeta');

    display: flex;
    align-items: center;
    height: rem(40px);
    padding: 0 1rem;
    cursor: pointer;
    user-select: none;
  }

  .#{$prefix}--list-box__menu-item:hover,
  .#{$prefix}--list-box__menu-item--highlighted {
    background-color: $hover-row;
    outline: 1px solid transparent;
    text-decoration: underline;
    color: $text-01;
  }

  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
    width: 100%;
  }

  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  // Tweaks for descendants

  // In multi-select scenarios, we need to target checkbox inputs
  .#{$prefix}--list-box__menu-item > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
    margin: 0;
    width: 100%;
  }

  // When handling input, we need to target nodes that specifically opt-in to
  // the `combobox` role in order to make sure the text input is styled
  // correctly.
  .#{$prefix}--list-box input[role='combobox'] {
    background-color: inherit;
    font-weight: 600;
    outline-offset: 0;
    min-width: 0;
  }

  .#{$prefix}--list-box input[role='combobox']::placeholder {
    @include placeholder-colors;
    font-weight: 400;
  }

  .#{$prefix}--list-box--disabled input[role='combobox'] {
    opacity: 1;
  }
}

@mixin listbox--x {
  // The overall container element for a `list-box`. Has two variants,
  // `disabled` and `inline`.
  .#{$prefix}--list-box__wrapper--inline {
    display: inline-grid;
    align-items: center;
    grid-template: auto auto / auto auto auto;
    grid-gap: rem(4px);

    .#{$prefix}--label {
      @include type-style('body-short-01');
    }

    .#{$prefix}--label,
    .#{$prefix}--form__helper-text,
    .#{$prefix}--form-requirement {
      margin: 0;
    }

    .#{$prefix}--form__helper-text {
      max-width: none;
    }

    .#{$prefix}--form-requirement {
      grid-column: 2;
    }
  }

  .#{$prefix}--list-box {
    position: relative;
    width: $list-box-width;
    height: rem(40px);
    max-height: rem(40px);
    background-color: $field-01;
    border: none;
    border-bottom: 1px solid $ui-04;
    cursor: pointer;
    color: $text-01;
    transition: all $duration--fast-02 motion(standard, productive);

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

  .#{$prefix}--list-box--expanded:hover {
    background-color: $field-01;
  }

  .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
    background-color: $field-02;
  }

  .#{$prefix}--list-box .#{$prefix}--text-input {
    height: 100%;
  }

  // invalid states
  .#{$prefix}--list-box__invalid-icon {
    position: absolute;
    top: $carbon--spacing-04;
    right: $carbon--spacing-08;
    fill: $support-01;
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
    top: $carbon--spacing-03;
  }

  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
    border-bottom: 0;
    padding-right: carbon--mini-units(8);
  }

  .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    padding-right: carbon--mini-units(7);
  }

  // Light variation for 'list-box'
  .#{$prefix}--list-box--light {
    background-color: $field-02;
  }

  .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
    border-bottom-width: 0;
  }

  // Disabled state for `list-box`
  .#{$prefix}--list-box--disabled:hover {
    background-color: $field-01;
  }

  .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
    background-color: $field-02;
  }

  .#{$prefix}--list-box--disabled,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
    border-bottom-width: 0;
    outline: none;
  }

  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label,
  .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
    color: $disabled-02;
  }

  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg {
    fill: $disabled-02;
  }

  .#{$prefix}--list-box--disabled,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
    cursor: not-allowed;
  }

  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item--highlighted {
    color: $disabled-02;
    text-decoration: none;
  }

  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover {
    cursor: not-allowed;
  }

  // disabled && invalid
  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
    padding-right: $carbon--spacing-09;
  }

  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    padding-right: carbon--mini-units(4);
  }

  // Inline variant for a `list-box`
  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
    background-color: $field-02;
    border-width: 0;

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

  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded {
    border-bottom-width: 0;
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded
    .#{$prefix}--list-box__field[aria-expanded='true'] {
    border-width: 0;
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover,
  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover {
    background-color: $field-02;
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline,
  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    height: rem(32px);
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    padding: 0 carbon--mini-units(4) 0 $carbon--spacing-03;
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
    padding: 0 $carbon--spacing-03;
  }

  .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
    right: $carbon--spacing-07;
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
    color: $text-01;
  }

  // The field we use for input, showing selection, etc.
  .#{$prefix}--list-box__field {
    @include button-reset;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: rem(40px);
    padding: 0 $carbon--spacing-09 0 $carbon--spacing-05;
    cursor: pointer;
    outline: none;
    border-bottom: 1px solid $ui-04;
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
    border: none;
  }

  .#{$prefix}--list-box__field:focus {
    @include focus-outline('outline');
  }

  .#{$prefix}--list-box__field[disabled] {
    outline: none;
    color: $disabled-02;
  }

  .#{$prefix}--list-box__field .#{$prefix}--text-input {
    border-bottom: none; // Use border on list box instead
  }

  // Label for a `list-box__field`
  .#{$prefix}--list-box__label {
    @include type-style('body-short-01');
    color: $text-01;
    user-select: none;
  }

  // Menu status inside of a `list-box__field`
  .#{$prefix}--list-box__menu-icon {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 0 1rem;
    transition: transform $duration--fast-02 motion(standard, productive);
    cursor: pointer;
  }

  .#{$prefix}--list-box__menu-icon > svg {
    fill: $ui-05;
    height: 100%;
  }

  .#{$prefix}--list-box__menu-icon--open {
    transform: rotate(180deg);
  }

  // Selection indicator for a `list-box__field`
  .#{$prefix}--list-box__selection {
    display: inline-block;
    position: absolute;
    top: 0;
    right: rem(26px);
    bottom: 0;
    height: rem(40px);
    padding: 0 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color $duration--fast-02 motion(standard, productive);
  }

  .#{$prefix}--list-box__selection > svg {
    fill: $ui-05;
    height: 100%;
  }

  // Modifier for a selection to show that multiple selections have been made
  .#{$prefix}--list-box__selection--multi {
    @include type-style('label-01');

    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background-color: $interactive-02;
    height: rem(24px);
    color: $inverse-01;
    line-height: 0;
    padding: rem(8px);
    padding-right: rem(2px); // Align with hover circle of X button
    margin-right: rem(10px);
    border-radius: rem(12px);
  }

  .#{$prefix}--list-box--inline .#{$prefix}--list-box__selection--multi {
    margin-left: rem(8px);
  }

  .#{$prefix}--list-box__selection--multi > svg {
    fill: white;
    margin-left: rem(4px);
    width: rem(20px);
    height: rem(20px);
    padding: rem(2px);
  }

  .#{$prefix}--list-box__selection--multi > svg:hover {
    border-radius: 50%;
    background-color: $icon-02;
  }

  .#{$prefix}--list-box__selection--multi:focus,
  .#{$prefix}--list-box__selection--multi:hover {
    outline: none;
  }

  // Descendant of a `list-box` that displays a list of options to select
  .#{$prefix}--list-box__menu {
    @include box-shadow();
    position: absolute;
    left: 0;
    right: 0;
    width: $list-box-width;
    background-color: $ui-01;
    max-height: rem(140px);
    overflow-y: auto;
    z-index: z('dropdown');
  }

  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu,
  .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu {
    background-color: $field-02;
  }

  // Descendant of a `list-box__menu` that represents a selection for a control
  .#{$prefix}--list-box__menu-item {
    @include type-style('body-short-01');
    height: rem(40px);
    color: $text-02;
    cursor: pointer;
    user-select: none;
    position: relative;

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

      + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option {
        border-color: transparent;
      }
    }

    &:active {
      background-color: $selected-ui;
    }
  }

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

  .#{$prefix}--list-box__menu-item__option {
    @include focus-outline('reset');
    display: block;
    color: $text-02;
    text-decoration: none;
    font-weight: normal;
    line-height: rem(16px);
    padding: rem(11px) 0;
    margin: 0 rem(16px);
    border: 1px solid transparent;
    border-top-color: $ui-03;
    text-overflow: ellipsis;
    overflow: hidden;

    &:focus {
      @include focus-outline('outline');
      margin: 0;
      padding: rem(11px) rem(16px);
      border-color: transparent;
    }

    &:hover {
      color: $text-01;
      border-color: transparent;
    }
  }

  .#{$prefix}--list-box__menu-item--highlighted {
    background-color: $hover-ui;
    color: $text-01;
    border-color: transparent;

    + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option {
      border-color: transparent;
    }
  }

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

  .#{$prefix}--list-box__menu-item--active,
  .#{$prefix}--list-box__menu-item--active:hover {
    color: $text-01;
    background-color: $selected-ui;
    border-bottom-color: $selected-ui;
  }

  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
    width: 100%;
  }

  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  // Tweaks for descendants

  // In multi-select scenarios, we need to target checkbox inputs
  .#{$prefix}--list-box__menu-item > .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
    margin: 0;
    width: 100%;
  }

  // When handling input, we need to target nodes that specifically opt-in to
  // the `combobox` role in order to make sure the text input is styled
  // correctly.
  .#{$prefix}--list-box input[role='combobox'] {
    background-color: inherit;
    font-weight: 600;
    outline-offset: -1px;
    min-width: 0;
  }

  .#{$prefix}--list-box input[role='combobox']::placeholder {
    color: $text-01;
    font-weight: 400;
  }

  .#{$prefix}--list-box--disabled input[role='combobox'] {
    opacity: 1;
  }
}

@include exports('list-box') {
  @if feature-flag-enabled('components-x') {
    @include listbox--x;
  } @else {
    @include listbox;
  }
}