@import '../../common.scss';

.label {
  display: flex;
  width:100%;
  height: 30px;
}

$borderColor: $B30;


.inputs {

  // Selectors
  $inputField: ">div:first-child";
  $selectionField: ">div:last-child";

  @mixin apply-to-selection-field-border-element {
    &.checkbox {
      #{$selectionField} {
        @content;
      }
    }
    &.inputwithoptions,
    &.dropdown {
      #{$selectionField}>div>div { // Dropdown's <Input> when options not opened
        @content;
      }
    }
  }

  display:flex;
  align-items: center;

  #{$inputField} {
    flex-grow: 1;
    box-sizing: content-box;
    border-bottom-right-radius:0;
    border-top-right-radius: 0;
    min-width: 0;
  }

  // TODO: extract mixin
  &.hasFocusFirst {
    #{$inputField} {
      z-index: 1;
      border-right-width: 1px;
    }
    @include apply-to-selection-field-border-element {
      border-left-width: 0px;
    }
  }

  &.hasFocusLast {
    #{$inputField} {
      border-right-width: 0px;
    }
    @include apply-to-selection-field-border-element {
      z-index: 1;
      border-left-width: 1px;
    }
  }

  &:not(.hasFocusLast) {
    @include apply-to-selection-field-border-element {
      border-left-width: 0;
    }
  }
  // TODO: extract mixin - END

  &.disabled {
    #{$inputField} {
      border-right:solid 1px $GR20;
    }
  }
}

.checkbox {
  .borderWrapper {
    background: $B50;
    padding: 5px 12px;
    border-bottom-left-radius:0;
    border-top-left-radius: 0;
    box-sizing: content-box;

    &.disabled {
      background: $D70;
    }
  }
}

// This is separately on root scope on purpose, since this could be extracted in the future
// as a generic border theme.
.borderWrapper {
  border-radius: 6px;
  border:solid 1px $borderColor;
  &.error {
    border:solid $R10 1px;
  }
  &.disabled {
    border:solid 1px $D60;
  }
}