@use '@zywave/zui-input/src/input' as *;

// This is for the group label alignment
$checkbox-size: #{rem(20)};
$checkbox-margin: #{rem(13)};

:host {
  contain: none;
  display: block; // browsers will do "display: inline" by default because backwards compatibility

  zui-icon {
    transition: color 100ms ease-in-out;
  }
}

.wrapper {
  position: relative;
  display: block;

  &.in-scrolling-dialog {
    .options-container-parent {
      position: static;
      height: auto;

      .options-container {
        position: static;
      }
    }
  }
}

.control {
  @extend %input-base;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: rem(4) rem(10) rem(4) rem(14);

  zui-icon {
    cursor: pointer;
    color: var(--zui-gray-400);

    &[icon='zui-chevron-down'] {
      transition: transform 0.3s ease-out;

      &.hidden {
        display: none;
      }
    }
  }

  zui-spinner {
    --paper-spinner-stroke-width: #{rem(2)};
    --zui-spinner-size: #{rem(20)};
    width: rem(20);
    height: rem(20);
    margin: 0 rem(12);
  }

  &.focused {
    border-color: var(--zui-blue-400);
    box-shadow: 0 0 0 rem(1) var(--zui-blue-400);
    outline: none;

    zui-icon[icon='zui-chevron-down'] {
      color: var(--zui-gray);
      transform: rotate(180deg);
    }
  }

  .input {
    display: flex;
    width: rem(80);
    flex-grow: 1;
    align-items: center;

    input {
      display: flex;
      width: 0;
      min-height: rem(24);
      flex-grow: 1;
      margin: rem(4) rem(4) rem(4) 0;
      border: 0;
      outline: none;
      font-family: inherit;
      font-size: inherit;
      color: inherit;

      &[readonly] {
        cursor: default;
      }

      &::-webkit-input-placeholder {
        color: var(--zui-gray-200);
      }

      &::-moz-placeholder {
        opacity: 1;
        color: var(--zui-gray-200);
      }

      &:-moz-placeholder {
        opacity: 1;
        color: var(--zui-gray-200);
      }

      &:-ms-input-placeholder {
        color: var(--zui-gray-200);
      }

      // FF adds red box-shadow to ALL input fields
      // that are marked as required.
      // This is to reset it 🔪🔪🔪
      &:not(output):-moz-ui-invalid {
        box-shadow: none;
      }
    }

    zui-icon[icon='zui-remove'] {
      --zui-icon-size: #{rem(12)};
      margin-right: rem(8);

      &:hover {
        color: var(--zui-gray);
      }
    }
  }

  .selection {
    display: flex;
    min-height: rem(24);
    align-items: center;
    margin: rem(4) rem(4) rem(4) 0;
    padding: 0 rem(7);
    background-color: var(--zui-gray-100);
    border-radius: rem(2);
    cursor: default;

    zui-icon[icon='zui-remove'] {
      --zui-icon-size: #{rem(10)};
      margin-left: rem(10);

      &:hover {
        color: var(--zui-gray);
      }
    }
  }
}

.options-container-parent {
  position: absolute;
  height: 0;
  z-index: z(default);

  &.hidden {
    display: none;
  }

  .options-container {
    position: absolute;
    max-height: rem(304);
    overflow-y: hidden;
    padding: rem(5) 0;
    background-color: #fff;
    border-radius: 0 0 rem(4) rem(4);
    box-shadow: 0 rem(1) rem(3) rem(1) rgba(0, 0, 0, 0.16);
    color: var(--zui-gray-700);
    transition: max-height 0.2s, padding 0.2s, box-shadow 0.2s;

    &.hidden {
      max-height: 0;
      padding: 0;
      box-shadow: none;
    }

    &.skinny-scrollbar {
      @extend %skinny-scrollbar;
    }

    .option {
      display: flex;
      min-height: rem(36);
      align-items: center;
      padding: rem(4) rem(10);
      cursor: pointer;

      &.readonly {
        font-style: italic;
        cursor: default;
      }

      &-content {
        display: flex;
        align-items: center;
      }

      zui-checkbox {
        --zui-checkbox-checkbox-margin: 0 #{$checkbox-margin} 0 0;
        --zui-checkbox-label-margin: 0;
        display: flex;
        align-items: center;
        pointer-events: none;

        &[checked] + .option-content {
          font-weight: 600;
        }
      }

      zui-icon {
        --zui-icon-size: 1rem;
        margin-right: $checkbox-margin;
      }

      &.highlighted {
        background-color: var(--zui-gray-50);
      }

      &.disabled {
        outline: none;
        cursor: not-allowed;
        color: var(--zui-gray-300);
      }

      &.selected {
        font-weight: 700;
      }

      &.tag {
        border-top: rem(1) solid var(--zui-gray-100);
        font-style: italic;
        color: var(--zui-blue);
      }

      .unique {
        font-weight: 700;
      }

      &.select-all {
        border-bottom: rem(1) solid var(--zui-gray-200);

        &.sticky {
          position: sticky;
          top: 0;
          z-index: z(default) + 1;
          padding-top: rem(9); // add 5px + the default option padding of 4px
          padding-bottom: rem(9); // add 5px + the default option padding of 4px
          background-color: #fff;
        }

        &:hover {
          background-color: var(--zui-gray-50);
        }
      }
    }

    .group-label {
      display: block;
      margin-top: rem(20);
      padding: 0 rem(10) rem(5);
      font-size: rem(12);
      font-weight: 700;
      text-transform: uppercase;
      cursor: default;
      color: var(--zui-gray-300);

      &:first-of-type {
        margin-top: 0;
      }
    }
  }
}

:host([multiselect]) {
  .options-container-parent {
    .options-container {
      .group-label {
        margin-left: calc(#{$checkbox-margin} + #{$checkbox-size});
      }
    }
  }
}

:host(:hover) {
  .control {
    border-color: var(--zui-gray-400);

    zui-icon[icon='zui-chevron-down'] {
      color: var(--zui-gray);
    }
  }
}

:host([disabled]) {
  pointer-events: none;

  .control[disabled] {
    cursor: not-allowed;

    zui-icon {
      color: var(--zui-gray);

      &:hover {
        color: var(--zui-gray) !important;
      }
    }

    input {
      background-color: var(--zui-gray-100);
      cursor: not-allowed;
      color: var(--zui-gray);
    }
  }
}

:host(.xsmall) {
  width: rem(65);
}

:host(.small) {
  width: rem(200);
}

:host(.medium) {
  width: rem(300);
}

:host(.large) {
  width: rem(400);
}

:host(.is-invalid) {
  .control {
    border: rem(1) solid var(--zui-red);
    box-shadow: 0 0 0 rem(1) var(--zui-red);

    &:hover {
      border-color: var(--zui-red-600);
      box-shadow: 0 0 0 rem(1) var(--zui-red-600);
    }

    &:focus {
      border-color: var(--zui-red-600);
      box-shadow: 0 0 0 rem(1) var(--zui-red-600);
      outline: none;
    }
  }
}

:host(.is-valid) {
  .control {
    border: rem(1) solid var(--zui-green-400);
    box-shadow: 0 0 0 rem(1) var(--zui-green-400);

    &:hover {
      border-color: var(--zui-green);
      box-shadow: 0 0 0 rem(1) var(--zui-green);
    }

    &:focus {
      border-color: var(--zui-green);
      box-shadow: 0 0 0 rem(1) var(--zui-green);
      outline: none;
    }
  }
}