// Defaults
@mixin sai-input-defaults() {
    display: inline-block;
    box-sizing: border-box;
    height: rem-calc(32);
    padding: rem-calc(4 16);
    margin: rem-calc(5);

    border: 1px solid $medium-gray;
    border-radius: rem-calc(16);

    font-family: "Brandon Grotesque Regular";
    font-size: rem-calc(16);
    line-height: rem-calc(18);
    color: $very-dark-gray;
    box-shadow: none;

    &:disabled {
        opacity: 0.6;
    }
    
    &::placeholder {
        color: $very-dark-gray;
        font-style: italic;
    }

    &:focus {
        box-shadow: none;
        border-color: $black;
    }
}

// Label
@mixin sai-input-label() {
    display: block;
    vertical-align: middle;

    &:not(.#{$package-prefix}-switch-paddle) {
        width: 100%;
    }

}
label.#{$package-prefix} {
    @include sai-input-label;
}

// Button
@mixin sai-button-color($color) {
    color: $white;
    border-color: $color;
    background-color: $color;

    &.hollow {
        color: $color;
        background-color: $white;
    }
}
@mixin sai-input-button() {
    @include sai-input-defaults;
    height: rem-calc(28);
    cursor: pointer;

    @include sai-button-color($dark-gray);

    @each $key, $value in $app-colors {
        &.#{$key} {
            @include sai-button-color($value);
        }
    }
}
button.#{$package-prefix} {
    @include sai-input-button;
}

// Input
@mixin sai-input-input() {
    @include sai-input-defaults;

    @each $key, $value in $app-colors {
        &.#{$key} {
            color: $value;
            border-color: $value;
        }
    }
    
    &[type="button"] {
        @include sai-input-button;
    }

    &[type="checkbox"] {
        height: auto;
        padding: 0;
        margin: 0;
        border: none;

        & + span {
            margin-left: 6px;
        }
    }

    &[type="color"] {
        background-color: transparent;
    }

    &[type="file"] {
        height: auto;
    }

    &[type="radio"] {
        height: auto;
        padding: 0;
        margin: 0;
        border: none;

        & + span {
            margin-left: 6px;
        }
    }
}
input.#{$package-prefix} {
    @include sai-input-input;
}

// Textarea
@mixin sai-input-textarea() {
    @include sai-input-defaults;
    height: auto;
    padding: rem-calc(12);
}
textarea.#{$package-prefix} {
    @include sai-input-textarea;
}

// Select
@mixin sai-input-select() {
    @include sai-input-defaults;
    width: auto;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: rem-calc(0 35 0 25);

    background-image: sai-input-select-svg($very-dark-gray);
    background-position: right rem-calc(10) center;
    background-repeat: no-repeat;

    &.primary {
        color: $white;
        border-color: $primary-color;
        background-image: sai-input-select-svg($white);
        background-color: $primary-color;
    }

    &.secondary {
        color: $primary-color;
        border-color: $primary-color;
        background-image: sai-input-select-svg($primary-color);
    }
}
select.#{$package-prefix} {
    @include sai-input-select;
}

// Switch
@mixin sai-input-switch() {
    @include switch-input;
    opacity: 0 !important;
}
@mixin sai-input-switch-paddle-color($color) {
    input:checked + & {
        background-color: $color;
    }

    input:disabled + & {
        opacity: 0.6;
    }
}
@mixin sai-input-switch-paddle() {
    @include switch-paddle;
    margin: rem-calc(5) !important;
    
    @each $key, $value in $app-colors {
        &.#{$key} {
            @include sai-input-switch-paddle-color($value);
        }
    }
}
input.#{$package-prefix}-switch {
    @include sai-input-switch;
}
label.#{$package-prefix}-switch-paddle {
    @include sai-input-switch-paddle;
}