@import '../base/states';
@import './layout';

$button-border: rgba(0, 0, 0, .08) !default;
$button-background: $background !default;
$button-hover-border: rgba(0, 0, 0, .15) !default;
$button-active-border: rgba(0, 0, 0, .1) !default;
$button-disabled-border: $button-border;

$button-gradient: linear-gradient($base, darken($base, 2%)) !default;
$button-hover-gradient: linear-gradient(darken($hover-background, 1%), darken($hover-background, 2%)) !default;
$button-active-gradient: linear-gradient(darken($base, 2%), $base) !default;

$button-focused-box-shadow: 0 0 0 2px darken($background, 6%) !default;
$button-active-box-shadow: inset 0 3px 5px darken($background, 9%) !default;

$primary-background: $accent !default;
$primary-border: $accent !default;
$primary-focused-box-shadow: 0 0 0 2px lighten($primary-background, 23%) !default;
$primary-active-background: $primary-background !default;
$primary-active-box-shadow: inset 0 3px 5px desaturate($primary-background, 3%) !default;
$primary-disabled-background: $primary-background !default;

$primary-gradient: linear-gradient(adjust-hue($primary-background, 3), $primary-background) !default;
$primary-hover-gradient: linear-gradient(adjust-hue($primary-background, 6), adjust-hue($primary-background, 3)) !default;
$primary-active-gradient: linear-gradient($primary-background, adjust-hue($primary-background, 3)) !default;
$primary-disabled-gradient: linear-gradient(adjust-hue($primary-background, 6), $primary-disabled-background) !default;

$buttongroup-button-focused-box-shadow: inset 0 0 0 2px darken($base, 5%) !default;
$buttongroup-selected-button-focused-box-shadow: inset 0 0 0 2px darken($primary-background, 2%) !default;

@include exports('button/theme') {
.k-button {
    color: $normal-text-color;
    background-color: $button-background;
    background-image: $button-gradient;
    border-color: $button-border;
    user-select: none;

    > .k-icon {
       color: inherit;
    }

    &:hover {
        background-image: $button-hover-gradient;
        border-color: $button-hover-border;
    }

    &:focus,
    &.k-state-focused {
        background-color: $button-background;
        background-image: $button-gradient;
        border-color: $button-hover-border;
        box-shadow: $button-focused-box-shadow;
        outline: 0;
    }

    &:active,
    &.k-state-active {
        background-image: $button-active-gradient;
        border-color: $button-active-border;
        box-shadow: $button-active-box-shadow;
    }

    &[disabled],
    &.k-state-disabled,
    &.k-state-disabled:hover,
    &.k-state-disabled:active,
    [disabled] &,
    &.k-state-disabled:hover,
    &.k-state-disabled:active {
        color: $normal-text-color;
        background-image: $button-gradient;
        border-color: $button-disabled-border;
        opacity: .7;
        box-shadow: none;
        cursor: default;
        outline: 0;
    }
}

.k-state-disabled {
    .k-button,
    .k-button:hover,
    .k-button:active {
        color: $normal-text-color;
        background-image: $button-gradient;
        border-color: $button-disabled-border;
        opacity: .7;
        box-shadow: none;
        cursor: default;
        outline: 0;
    }
}

.k-primary {
    color: $selected-text-color;
    background-color: $primary-background;
    background-image: $primary-gradient;
    border-color: $primary-border;

    &:hover {
        background-image: $primary-hover-gradient;
        border-color: $primary-border;
    }

    &:focus,
    &.k-state-focused {
        background-color: $primary-background;
        background-image: $primary-gradient;
        box-shadow: $primary-focused-box-shadow;
    }

    &:active,
    &.k-state-active {
        background-image: $primary-active-gradient;
        box-shadow: $primary-active-box-shadow;
    }

    &.k-state-disabled,
    &.k-state-disabled:hover,
    .k-state-disabled:focus,
    .k-state-disabled:active {
        color: $selected-text-color;
        background-color: $primary-disabled-background;
        background-image: $primary-disabled-gradient;
        border-color: $primary-disabled-background;
        box-shadow: none;
    }
}

$inner-border-radius: 1px; /* $border-radius - 1 */

.k-button-group {
    border-color: $button-border;
    border-radius: 2px; /* $border-radius */

    .k-button {
        border-radius: 0;

        &::before {
            background: $button-border;
        }

        &:focus {
            box-shadow: $buttongroup-button-focused-box-shadow;
        }

        &.k-state-active {
            color: $selected-text-color;
            background-color: $primary-background;
            background-image: $primary-gradient;
            border-color: $primary-border;
            box-shadow: none;

            &:focus {
                box-shadow: $buttongroup-selected-button-focused-box-shadow;
            }

            &:hover {
                background-image: $primary-hover-gradient;
                border-color: $primary-border;
            }

            &.k-state-active::before,
            &.k-state-active + .k-button::before {
                background: $primary-border;
            }
        }

        &.k-group-start {
            border-radius: $inner-border-radius 0 0 $inner-border-radius;
        }

        &.k-group-end {
            border-radius: 0 $inner-border-radius $inner-border-radius 0;
        }

        &.k-group-start:last-child {
            border-radius: $border-radius;
        }
    }

    &.k-state-disabled {
        .k-button {
            &:focus {
                box-shadow: none;
            }
        }
    }
}
}