.#{$ns}NestedSelectControl {
  position: relative;

  .#{$ns}NestedSelect-menu {
    padding-top: px2rem(4px);
    padding-bottom: px2rem(4px);
    box-shadow: var(--Form-select-outer-boxShadow);
  }
}

.#{$ns}NestedSelect {
  position: relative;
  @include input-border();

  &.is-mobile {
    text-align: right;
  }

  &-optionArrowRight {
    display: inline-block;
    svg {
      width: px2rem(10px);
      height: px2rem(10px);
      fill: var(--Form-input-iconColor);
      color: var(--default-icon-color);
      top: 0;
    }
  }

  &-optionArrowRight.is-disabled {
    svg {
      color: var(--text--muted-color);
    }
  }

  &-menuOuter {
    display: flex;
  }

  &-noResult {
    width: px2rem(160px);
    padding: 0 var(--gap-xs);
    color: var(--Form-select-placeholderColor);
    line-height: var(--Form-input-lineHeight);
    font-size: var(--Form-select-input-fontSize);
    user-select: none;
    padding: calc(
        (
            var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
              var(--Form-input-fontSize)
          ) / 2
      )
      var(--Form-select-paddingX);
  }

  &-menu {
    width: px2rem(160px);
    min-width: px2rem(100px);
    min-height: px2rem(32px);
    max-height: px2rem(175px);
    background: var(--Form-select-menu-bg);
    color: var(--Form-select-menu-color);
    border-radius: var(--borderRadius);
    box-shadow: var(--Form-select-outer-boxShadow);
    overflow-y: auto;
    overflow-x: hidden;
    border: var(--Form-select-outer-borderWidth) solid
      var(--Form-select-outer-borderColor);
    &:not(:first-child) {
      border-left: 0;
      margin-left: px2rem(4px);
    }

    .#{$ns}NestedSelect-option {
      position: relative;
      padding: var(--select-base-default-option-paddingTop)
        var(--select-base-default-option-paddingRight)
        var(--select-base-default-option-paddingBottom)
        var(--select-base-default-option-paddingLeft);
      min-height: var(--select-base-default-option-line-height);
      line-height: var(--select-base-default-option-line-height);
      cursor: pointer;
      display: flex;
      font-size: var(--select-base-default-option-fontSize);
      font-weight: var(--select-base-default-option-fontWeight);
      color: var(--select-base-default-option-color);
      background: var(--select-base-default-option-bg-color);

      > .#{$ns}NestedSelect-optionLabel {
        flex: 1;
        height: px2rem(32px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.is-disabled {
          cursor: not-allowed;
          color: var(--text--muted-color);
        }
      }
      .#{$ns}NestedSelect-optionLabel-highlight {
        color: var(--Form-select-menu-onActive-color);
      }

      &.is-active {
        color: var(--Form-select-menu-onActive-color);
        background: var(--Form-select-menu-onActive-bg);
      }

      &:hover {
        color: var(--Form-select-menu-onHover-color);
        background: var(--Form-select-menu-onHover-bg);
      }

      &:hover > .#{$ns}NestedSelect-childrenOuter {
        display: block;
      }

      &.no-result {
        justify-content: center;
        cursor: default;
        color: var(--Form-select-placeholderColor);
        &:hover {
          color: unset;
          background: unset;
        }
      }
    }
  }
  &-popup {
    height: px2rem(340px);
  }
}

.#{$ns}NestedSelect-popover {
  border: none;
  box-shadow: none;
}