$disabled-border-color: darken($base, 14%) !default;
$widget-border-color: darken($base, 8%) !default;
$header-background: saturate($base, 4%) !default;
$hover-border-color: darken($base, 20%) !default;
$selected-border-color: lighten($accent, 1%) !default;
$focused-item-shadow: 0 0 0 2px darken($background, 6%) !default;

@include exports('base/states') {

.k-widget,
.k-content,
.k-input,
.k-textbox {
    background-color: $background;
    border-color: $widget-border-color;
    color: $normal-text-color;
    border-radius: $border-radius;
}

.k-header {
    background-color: $header-background;
    border-color: $widget-border-color;
}

.k-link,
.k-icon,
.k-icon:hover,
.k-icon:focus {
    color: $normal-text-color;
    text-decoration: none;
}

.k-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// states
.k-state-default {
    border-color: $widget-border-color;
}

.k-state-selected {
    background-color: $selected-background;
    border-color: $selected-border-color;
    color: $selected-text-color;
}

.k-state-active {
    background-color: $background;
}

.k-textbox:focus,
.k-state-focused {
    box-shadow: $focused-item-shadow;
}

.k-state-hover,
.k-state-hover:hover {
    background-color: $hover-background;
    border-color: $hover-border-color;
    color: $hover-text-color;
}

.k-state-disabled,
.k-state-disabled .k-link,
.k-state-disabled .k-button {
    border-color: $disabled-border-color;
    color: $disabled-border-color;
    cursor: default;
    outline: 0;
}

.k-state-disabled {
    opacity: .7;
}

.k-state-error {
    border-style: ridge;
}

.k-state-empty {
    font-style: italic;
}

.k-state-highlight {
    background-color: saturate($base, 4%);
    border-color: $accent;
}

.k-button-bare {
    background: none !important;
    border-width: 0;
    box-shadow: none;
}

.k-button-bare:focus {
    box-shadow: none !important;
    border-color: transparent;
}

    // export variables to allow use in scripts
    $exported: (
        accent: $accent,
        base: $base,
        background: $background,

        border-radius: $border-radius,

        normal-background: $normal-background,
        normal-text-color: $normal-text-color,
        hover-background: $hover-background,
        hover-text-color: $hover-text-color,
        selected-background: $selected-background,
        selected-text-color: $selected-text-color,

        error: $error,
        warning: $warning,
        success: $success,
        info: $info,

        series-a: $series-a,
        series-b: $series-b,
        series-c: $series-c,
        series-d: $series-d,
        series-e: $series-e,
        series-f: $series-f
    );

    @each $name, $value in $exported {
        $type: type-of($value);

        .k-var--#{$name} {
            @if $type == 'color' {
                // background-color can store any color
                background-color: $value;
            } @else if $type == 'number' {
                // margin-top can store positive & negative values
                margin-top: $value;
            }
        }
    }
}