// --------------------------------------------
// Label Base Mixin ---------------------------
// --------------------------------------------

@mixin label {
  width: 100%;
  display: block;
  color: $control-color;
  font-size: $control-font-size;
  font-weight: $font-weight-bold;
  padding: calc($control-padding / 2) 0;
  font-family: $control-font-family;
}


// --------------------------------------------
// Input Base Mixin ---------------------------
// --------------------------------------------

@mixin input {
  outline: 0;
  width: 100%;
  display: block;
  resize: vertical;
  appearance: none;
  color: $control-color;
  border: $control-border;
  height: $control-height;
  box-shadow: $control-shadow;
  font-size: $control-font-size;
  transition: $control-transition;
  font-weight: $control-font-weight;
  line-height: $control-line-height;
  font-family: $control-font-family;
  padding: $space-0 $control-padding;
  border-radius: $control-border-radius;
  background-color: $control-background;

  &::-ms-clear {
    display: none;
  }

  &::placeholder {
    color: $control-placeholder-c;
    transition: $control-transition;
  }

  &:hover,
  &#{&}-hover {
    border-color: $control-hover-border;

    &::placeholder {
      color: $control-placeholder-hover-c;
    }
  }

  &:focus,
  &#{&}-focus {
    box-shadow: $control-focused-shadow;
    border-color: $control-active-border;
  }

  // in separate selector because it breaks ie11
  &:focus-within {
    border-color: $control-active-border;
  }

  &[disabled],
  &-disabled {
    &,
    &:hover {
      @include input-disabled;
    }

    & ~ .c-input-icon {
      color: $control-disabled-border;
    }
  }

  &-inline {
    width: auto;
    display: inline;
  }

  &-container {
    position: relative;
  }
}


// --------------------------------------------
// Input Disabled Mixin ------------------------
// --------------------------------------------

@mixin input-disabled {
  cursor: not-allowed;
  color: $color-gray-6;
  box-shadow: $control-shadow-disabled;
  border-color: $control-disabled-border;
  background-color: $control-disabled-background;

  &::placeholder {
    color: $color-gray-6;
  }
}


// --------------------------------------------
// Select Base Mixin ---------------------------
// --------------------------------------------
@mixin select {
  outline: 0;
  width: 100%;
  display: block;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  appearance: none;
  color: $control-color;
  height: $control-height;
  border: $control-border;
  font-size: $control-font-size;
  font-family: $control-font-family;
  padding: $space-0 $control-padding;
  padding-right: $select-padding-r;
  font-weight: $control-font-weight;
  line-height: $control-line-height;
  border-radius: $control-border-radius;
  background: $color-white $select-bg-img $select-bg-pos;
  background-size: 8px;

  &::-ms-expand {
    display: none;
  }

  &:focus::-ms-value {
    color: $control-color;
    background-color: transparent;
  }

  &-inline {
    display: inline;
    width: auto;
  }

  .c-input-icon + & {
    padding-left: $control-icon-padding;
  }

  &:focus {
    box-shadow: $select-box-shadow-focus;
  }

  &:hover {
    border-color: $control-hover-border;
  }

  &:active,
  &.c-input-active,
  &.c-select-active {
    &:focus {
      border-color: $control-active-border;
      outline: none;
    }
  }

  &:disabled,
  &[disabled],
  &.c-input-disabled {
    &,
    &:hover,
    &:active {
      @include input-disabled;

      background: $control-disabled-background $select-bg-img-disabled $select-bg-pos;
      box-shadow: none;
      cursor: not-allowed;
      background-size: 8px 10px;
    }
  }
}