.control-box{
  display: grid;
  padding-top: 12px;
  & .control-input{
    display: inline-flex;
    padding-left: 6px;
    border-bottom: 3px solid $primary-text-color;
    & input[type="text"]{
      border-bottom: none !important;
      padding-bottom: 3px;
      padding-top: 3px;
      padding-left: 6px;
      padding-right: 6px;
    }
    & .action{
      @extend .icon;
      cursor: pointer;
      padding-left: 3px;
      padding-right: 3px;
      padding-top:3px;
      padding-bottom:3px;
      margin-bottom: 3px;
      user-select: none;
      &:hover{
        border-radius: 50%;
        @extend .transition;
        @extend .shadow;
      }
      &:active{
        background: $action-color;
      }
    }
  }
  & .control-message{
    padding: 6px;
    @extend .overline-text;
  }
  & .control-checkbox{
    display: inline-flex;
    & label{
      padding-top: 3px;
      padding-left: 6px;
      padding-right: 6px;
    }
  }
  & .control-number{
    display: flex;
    padding-bottom: 1px;
    width: 100%;
    background-color: $action-color;
    border-bottom: 3px solid $primary-text-color;
    &:focus{
      border-bottom: 3px solid $primary-color;
    }
    & button, .button{
      border: none;
      border-radius: 0;
      padding: 0;
      background-color: $action-color;
      &:hover{
        box-shadow: none;
      }
    }
    & input[type="number"]{
      width: 100%;
      border-bottom: none;
    }
  }
  &.error{
    & label{
      color: $error-color;
    }
    & input[type="text"]{
      border-bottom: 3px solid $error-color;
    }
    & input[type="number"]{
      border-bottom: 3px solid $error-color;
    }
    & .control-number{
      border-bottom: 3px solid $error-color;
      & input[type="number"]{
        border-bottom: none;
      }
    }
    & input[type="checkbox"]{
      &:checked{
        background-color: $error-color;
      }
      border: 2px solid $error-color;
    }
    & input[type="radio"]{
      &:after{
        background-color: $error-color;
      }
      border: 2px solid $error-color;
    }
    & .control-input{
      border-bottom: 3px solid $error-color;
      & .action{
        color: $error-color;
      }
    }
    & select{
      background-color: $action-color;
      border-bottom: 3px solid $error-color;
      background-image: linear-gradient($error-color, $error-color),
      linear-gradient(-135deg, transparent 50%, $action-color 50%),
      linear-gradient(-225deg, transparent 50%, $action-color 50%),
      linear-gradient($action-color 42%, $error-color 42%);
      &:hover{
        background-image: linear-gradient($error-color, $error-color),
        linear-gradient(-135deg, transparent 50%, $action-color 50%),
        linear-gradient(-225deg, transparent 50%, $action-color 50%),
        linear-gradient($action-color 42%, $error-color 42%);
      }
    }
    & textarea{
      border-bottom: 3px solid $error-color;
    }
    & button, .button{
      @extend .error-theme;
    }
    & button.primary{
      @extend .error-reverse-theme;
    }
    & .control-message{
      color: $error-color;
    }
  }
  & select{
    width: 100%;
  }
}