@mixin control {
    &[disabled] {
        cursor: not-allowed;
    }

    &[loading] {
        cursor: wait;
    }
}

@mixin sizes {
    font-size: $size-normal;
    line-height: $size-normal;

    @each $name, $size in $sizes {
        &.is-#{$name} {
            font-size: $size;
            line-height: $size;
        }
    }
}

@mixin ui-colors($hover) {
    color: $color-black;
    background-color: $color-white;
    border-color: $color-border-gray;

    @if $hover {
        &:hover:not([disabled]) {
            border-color: $color-gray;
        }
    }

    @each $name, $color in $color-schema {
        &.is-#{$name} {
            background-color: $color;
            border-color: $color;
            @if $name != 'warning' {
                color: $color-white;
            } @else {
                color: $color-black;
            }

            @if $hover {
                &:hover:not([disabled]) {
                    border-color: transparent;
                    background-color: darken($color, $color-darken-ammount);
                }
            }
    
            &.is-secondary {
                background-color: rgba($color, $color-lt-ammount);
                border-color: transparent;
                color: $color;

                @if $hover {
                    &:hover:not([disabled]) {
                        border-color: transparent;
                        background-color: rgba($color, $color-lt-hover-ammount);
                    }
                }
            }
        }
    }
}

@mixin transitions {
    transition-duration: $transition-duration;
    transition-timing-function: $transition-timing-function;
}

@mixin autofill-hack {
    // webkit autofill hack
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
        -webkit-transition-delay: 9999s;
        transition-delay: 9999s;
    }
}