/// Стили контрола (input/textarea/select)
/// @group Forms.Control
///
/// @param {Number} $form-size - Размер контрола
///
/// @example scss
///   .form-select {
///     @include form-control(56);
///   }
///

@mixin form-control($form-size) {
    display: inline-block;
    width: calc(100% - 4px);
    min-width: auto;
    height: map-get($form-sizes, $form-size, control-height) - 4px;
    margin: 2px;
    transition: box-shadow .1s ease, color .1s ease;
    border: 0;
    border-radius: 2px;
    outline: none;
    background: $form-control-background;
    box-shadow: 0 0 0 2px $form-control-border-color;
    color: $form-control-color;
    font-weight: 400;

    padding: (
        map-get($form-sizes, $form-size, control-spacer-top)
        map-get($form-sizes, $form-size, control-spacer-right)
        map-get($form-sizes, $form-size, control-spacer-bottom)
        map-get($form-sizes, $form-size, control-spacer-left)
    );
    
    @include t(
        $typography-size: map-get($form-sizes, $form-size, typography-size-text),
        $margins: false
    );

    &[type=text],
    &[type=email],
    &[type=number],
    &[type=password],
    &[type=search],
    &[type=tel] {
        // Не работают box-shadow на iOS
        -webkit-appearance: none;
    }

    &::placeholder {
        color: $form-control-color-placeholder;
    }
  
    &:hover {
        box-shadow: 0 0 0 2px $form-control-border-color-hover;
    }
    
    &:focus,
    &.focus {
        background: $form-control-background;
        box-shadow: 0 0 0 2px $form-control-border-color-focus;
    }
  
    &:disabled,
    &:disabled:hover {
        background: $form-control-background-disabled;
        box-shadow: 0 0 0 2px $form-control-border-color-disabled;
        color: $form-control-color-disabled;
        cursor: text;
    }
}