.cbp-dropdown__wrapper {
  position: relative;
}

/* Dropdown Button */
.cbp-dropdown__custom {
  align-items: center;
  background-color: var(--cbp-color-white);
  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-base);
  border-radius: var(--cbp-border-radius-soft);
  border-right: 0;
  cursor: inherit;
  display: flex;
  font-family: inherit;
  font-size: inherit;
  height: var(--cbp-space-9x);
  line-height: inherit;
  padding-left: var(--cbp-space-2x);
  padding-right: var(--cbp-space-2x);
  position: relative;
  width: 100%;

  &:hover {
    border-color: var(--cbp-color-interactive-secondary-darker);
  }
  
  &:hover::after {
    background-color: var(--cbp-color-interactive-secondary-darker);
  }

  &:focus:not([disabled]) {
    outline: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-dark);
    border-color: var(--cbp-color-interactive-focus-dark);
  }

  &:focus:not([disabled])::after {
    background-color: var(--cbp-color-interactive-focus-dark);
  }

  &:disabled {
    border-color: var(--cbp-color-interactive-disabled-dark);
    background-color: var(--cbp-color-interactive-disabled-light);
    color: var(--cbp-color-interactive-disabled-dark);
    font-style: italic;

    &::after {
      background-color: var(--cbp-color-interactive-disabled-dark);
      border-color: var(--cbp-color-interactive-disabled-dark);
      font-style: initial;
    }
  }

  &:disabled .cbp-chips {
    background-color: var(--cbp-color-interactive-disabled-dark);
    color: var(--cbp-color-interactive-disabled-light);
    font-style: normal;
  }
}

/* Down Caret */
.cbp-dropdown__custom::after {
  align-items: center;
  background-color: var(--cbp-color-interactive-secondary-base);
  border-top-right-radius: var(--cbp-border-radius-soft);
  border-bottom-right-radius: var(--cbp-border-radius-soft);
  content: "\f107";
  color: var(--cbp-color-white);
  display: flex;
  font-family: "Font Awesome 5 Free";
  font-size: var(--cbp-space-5x);
  font-weight: var(--cbp-font-weight-black);
  justify-content: center;
  text-align: center;
  height: var(--cbp-space-9x);
  position: absolute;
  right: 0;
  width: var(--cbp-space-9x);
  z-index: 1;
}

.cbp-dropdown__placeholder {
  color: var(--cbp-color-text-dark);
  display: block;
  font-style: italic;
}

.cbp-dropdown__custom .cbp-chips {
  font-size: var(--cbp-font-size-subhead);
  height: var(--cbp-space-5x);
}



/* Dropdown Menu */
.cbp-dropdown {
  background-color: var(--cbp-color-white);
  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-base);
  border-radius: 0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft);
  display: none;
  max-height: 216px; // TechDebt: What's the reasoning for this magic number?
  overflow-y: scroll;
  position: absolute;
  width: calc(100% - 2px);
  z-index: var(--cbp-z-index-level-4);

  &:hover {
    border-top: 0;
  }

  &__item {
    align-items: center;
    border-bottom: 0;
    border-top: 0;
    color: var(--cbp-color-text-darkest);
    display: flex;
    font-size: 1rem;
    height: var(--cbp-space-9x);
    padding-left: var(--cbp-space-4x);
    position: relative;
    text-decoration: none;

    &:hover:not([disabled]) {
      background-color: var(--cbp-color-interactive-secondary-darker);
      color: var(--cbp-color-text-lightest);
      cursor: pointer;

      &::after {
        border-bottom: 1px solid var(--cbp-color-interactive-secondary-darker);
      }
    }

    &:focus:not([disabled]) {
      background-color: var(--cbp-color-interactive-focus-dark);
      color: var(--cbp-color-white);
      outline: 0;

      &::after {
        content: "";
        display: none;
        border-bottom: 1px solid var(--cbp-color-interactive-secondary-darker);
      }
    }

    /* Hacky solution due to width property (right margin) of separating line */
    &::after {
      content: "";
      border-bottom: 1px solid var(--cbp-color-interactive-secondary-lighter);
      display: block;
      height: 1px;
      left: var(--cbp-space-3x);
      bottom: 0;
      position: absolute;
      width: calc(100% - 24px);
    }

    &:visited {
      color: var(--cbp-color-text-darkest);
    }
  }
  
  &:focus {
    outline: 0;
  }
  
  &__item:last-child {
    &::after {
      content: "";
      border-bottom: 0;
      height: 0;
    }
  }
}

.cbp-dropdown__item--multiselect {
  & > input[type="checkbox"] {
    border-radius: 12px;

    &:hover:not([disabled]) {
      background-color: inherit;
      border-color: var(--cbp-color-interactive-secondary-lighter);
      box-shadow: initial;
      clip-path: initial;
    }

    &:checked {
      &:hover {
        background-color: var(--cbp-color-interactive-selected-light);

        &::before {
          border-right: 3px solid var(--cbp-color-text-darkest);
          border-bottom: 3px solid var(--cbp-color-text-darkest);
          height: 70%;
          width: 30%;
          transform: rotate(45deg) translateY(-10%) translateX(-10%);
        }
      }
    }

    &:focus {
      border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-lighter);
      box-shadow: initial;
      clip-path: initial;
      outline: 0 !important; // Overriding style from _focus.scss??
  
      &:hover:not([disabled]) {
        box-shadow: initial;
        clip-path: initial;
      }
    }
  }

  /* Hacky solution due to width property (right margin) of separating line */
  &::after {
    content: "";
    border-bottom: 1px solid var(--cbp-color-interactive-secondary-lighter);
    display: block;
    height: 1px;
    left: var(--cbp-space-3x);
    bottom: 0;
    position: absolute;
    width: calc(100% - 24px);

    &:hover {
      border-bottom: 0;
    }
  }

  &:focus-within {
    background-color: var(--cbp-color-interactive-focus-dark);
    color: var(--cbp-color-text-lighter);

    &::after {
      border-bottom: 0;
    }
  }
}

/* Custom Dropdown Error State */
.cbp-dropdown__custom--error {
  background-color: var(--cbp-color-danger-lighter);
  // TechDebt: this is why you would break border down into border-style, width, color. Less repetition.
  border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base);
  border-right: 0;

  &::after {
    border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base) !important;
    background-color: var(--cbp-color-danger-base) !important;
  }

  &:hover {
    // TechDebt - same
    border: var(--cbp-border-size-md) solid var(--cbp-color-danger-dark);
    border-right: 0;

    &::after {
      border: var(--cbp-border-size-md) solid var(--cbp-color-danger-dark) !important;
      background-color: var(--cbp-color-danger-dark) !important;
    }
  }

  &:focus:not([disabled]) {
    border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-dark);
    outline: 0;

    &::after {
      border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-dark) !important;
      background-color: var(--cbp-color-interactive-focus-dark) !important;
    }
  }

  & + .cbp-dropdown {
    background-color: var(--cbp-color-danger-lighter);
    border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base);
    border-top: 0;
    border-bottom-left-radius: var(--cbp-border-radius-soft);
    border-bottom-right-radius: var(--cbp-border-radius-soft);

    &:hover {
      border-top: 0;
    }

    &:focus {
      border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-focus-dark);
      border-top: 0;
      //border-bottom-left-radius: var(--cbp-border-radius-soft);
      //border-bottom-right-radius: var(--cbp-border-radius-soft);
      outline: 0;
    }
  }

  /* Caret Button */
  &::after {
    background-color: var(--cbp-color-danger-base);
    border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base);
  }
}

/* Open Custom Dropdown */
.cbp-dropdown--open {
  border-bottom-left-radius: 0px;

  & + .cbp-dropdown {
    border-top: 0;
    display: block !important;
  }

  &::after {
    content: '\f106';
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

/* When hover over custom select, apply hover to dropdown menu */
.cbp-dropdown__custom:hover + .cbp-dropdown {
  // border: 2px solid $cbp-ui-neutral-darker;
  border-top: 0;
}

/* Hover over error custom select, apply hover to dropdown menu */
.cbp-dropdown__custom--error:hover + .cbp-dropdown {
  // border: 2px solid $cbp-ui-danger-dark;
  border-top: 0;
}

/* Focus State */
.cbp-dropdown__custom:focus:not([disabled]) {
  //border: 2px solid var(--cbp-color-interactive-focus-dark);
  //border-right: 0;
  //outline: 0;
}

/* Focus Caret State */
.cbp-dropdown__custom:focus-within::after {
  //background-color: var(--cbp-color-interactive-focus-dark);
  // border: 2px solid $cbp-focus-dark;
}

// Focus on Select and Dropdown Menu
.cbp-dropdown--open:focus + .cbp-dropdown {
  // border: 2px solid $cbp-focus-dark;
  border-top: 0;
}