@include exports( "button/theme" ) {

    // Default button
    .k-button {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill(
                $button-hovered-text,
                $button-hovered-bg,
                $button-hovered-border,
                $button-hovered-gradient
            );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $button-focused-shadow;
        }

        // Pressed state
        &:active,
        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            box-shadow: inset $button-pressed-shadow;
        }

        // Selected state
        &.k-state-selected {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Primary button
    .k-button.k-primary {
        @include fill(
            $primary-button-text,
            $primary-button-bg,
            $primary-button-border,
            $primary-button-gradient
        );

        // Hovoer state
        &:hover,
        &.k-state-hover {
            @include fill(
                $primary-button-hovered-text,
                $primary-button-hovered-bg,
                $primary-button-hovered-border,
                $primary-button-hovered-gradient
            );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $primary-button-focused-shadow;
        }

        // Active state
        &:active,
        &.k-state-active {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Selected state
        &.k-state-selected {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Dropdown button
    .k-dropdown-button {

        &:active > .k-button:not(:disabled),
        &.k-state-active > .k-button:not(:disabled) {
            box-shadow: inset $button-pressed-shadow;
        }

        &:focus > .k-button,
        &.k-state-focused > .k-button {
            box-shadow: $button-focused-shadow;
        }

        .k-widget {
            border-width: 0;
            display: inline-block;
        }
    }


    // Button group
    .k-button-group {

        // Selected state
        .k-button:active,
        .k-button.k-state-active,
        .k-button.k-state-selected,
        > input[type="radio"]:checked + .k-button,
        > input[type="checkbox"]:checked + .k-button {
            @include fill(
                $primary-button-pressed-text,
                $primary-button-pressed-bg,
                $primary-button-pressed-border,
                $primary-button-pressed-gradient
            );
            box-shadow: $primary-button-pressed-shadow;
        }

        // Focused state
        .k-button:focus,
        .k-button.k-state-focused,
        > input[type="radio"]:focus + .k-button,
        > input[type="checkbox"]:focus + .k-button {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13);
        }

        // Disabled state
        // &:disabled,
        // &.k-state-disabled {}

    }


    // Split button
    .k-split-button:focus,
    .k-split-button.k-state-focused {
        outline: none;
        box-shadow: $button-focused-shadow;
    }

    .k-split-button.k-button-group .k-button {
        &:active,
        &.k-state-active {
            @include fill(
                $button-pressed-text,
                $button-pressed-bg,
                $button-pressed-border,
                $button-pressed-gradient
            );
            box-shadow: inset $button-pressed-shadow;
        }
    }

}




@include exports( "outline-button/theme" ) {

    // Outline button
    .k-button.k-outline {
        border-color: currentColor;
        color: $button-text;
        background: none;
        box-shadow: none;

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $button-focused-shadow;
        }

        // Active state
        &:active,
        &.k-state-active {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }

        // Selected state
        &.k-state-selected {
            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
        }
    }
    .k-button.k-primary.k-outline {
        border-color: currentColor;
        color: $primary-button-bg;
        background: none;
        box-shadow: none;

        // Hover state
        &:hover,
        &.k-state-hover {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
        }

        // Focused state
        &:focus,
        &.k-state-focused {
            box-shadow: $primary-button-focused-shadow;
        }

        // Actove state
        &:active,
        &.k-state-active {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
            box-shadow: none;
        }

        // Selected state
        &.k-state-selected {
            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
            box-shadow: none;
        }
    }

}




@include exports( "flat-button/theme" ) {

    // Flat button
    .k-button-flat {

        // Explicitly exclude flat button from button group styling
        &,
        .k-button-group & {
            color: inherit;
            background: none;
        }

        &::after {
            display: block;
        }

        &:focus,
        &.k-state-focused {

            &::after {
                box-shadow: inset 0 0 0 2px currentColor;
                opacity: .12;
            }
        }
    }
    .k-button-flat.k-primary {

        // Explicitly exclude flat button from button group styling
        &,
        &:hover,
        &.k-state-hover,
        .k-button-group & {
            color: $primary;
            background: none;
        }
    }

}