/// @Foundation.settings
// Button
$button-padding: 0.85em 1em !default;
$button-margin: 0 $global-padding $global-padding 0 !default;
$button-style: solid !default;
$button-background: $primary-color !default;
$button-background-hover: scale-color(
    $button-background,
    $lightness: -15%
) !default;
$button-color: auto !default;
$button-radius: 0 !default;
$button-sizes: (
    tiny: 0.7,
    small: 0.8,
    medium: 1,
    large: 1.3
) !default;
$button-font-size: 0.9rem !default;
$button-opacity-disabled: 0.5 !default;
$button-tag-selector: false !default;
// /
%button {
    display: inline-block;
    border: 0;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease-out;
    vertical-align: middle;
    padding: $button-padding;
    margin: $button-margin;
    font-size: $button-font-size;
    border-radius: $button-radius;
    // Dropdown arrow
    // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic

    // &[data-popup-toggle] {
    // position: relative;
    // padding-right: 2em; // Placeholder
    // &::after {
    // @include css-triangle(6px, black, top);
    // position: absolute;

    // right: 0.7em;
    // top: 50%;
    // margin-top: -3px;
    // }
    // }
}
@mixin button-size($size: medium, $expand: false) {
    $size: $button-font-size * map-get($button-sizes, $size);
    font-size: $size;
    @if $expand {
        @include button-expand;
    }
    @if using(iconic) {
        .iconic {
            width: 1em;
            height: 1em;
            vertical-align: middle;
            margin-right: 0.25em;
            margin-top: -2px; // The icons are oddly misaligned
        }
    }
}
@mixin button-expand($expand: true) {
    @if $expand {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    } @else {
        display: inline-block;
        width: auto;
        margin: $button-margin;
    }
}
@mixin button-style(
    $background: $button-background,
    $background-hover: $button-background-hover,
    $color: $button-color,
    $style: $button-style,
    $radius: $button-radius,
    $btngroup: false
) {
    @if $style == hollow {
        border: 1px solid $background;
        background: transparent;
        color: $background;
        &:hover,
        &:focus {
            border-color: scale-color($background, $lightness: 25%);
            background: transparent;
            color: scale-color($background, $lightness: 25%);
        }
    } // Solid is the default
    @else {
        @if $color == auto {
            $color: isitlight($background);
        }
        background: $background;
        color: $color;
        &:hover,
        &:focus {
            @if $background-hover == auto {
                background: scale-color($background, $lightness: -15%);
            } @else {
                background: $background-hover;
            }
            color: $color;
        }
    }
    @if $btngroup {
        border-color: $background;
        &:hover,
        &:focus {
            border-color: scale-color($background, $lightness: -25%);
        }
    }
    @if using(iconic) {
        @if $style == hollow {
            .iconic {
                @include color-icon($background);
            }
            &:hover .iconic {
                @include color-icon(scale-color($background, $lightness: 25%));
            }
        } @else {
            .iconic {
                @include color-icon($color);
            }
        }
    }
}
@mixin button-disabled() {
    opacity: $button-opacity-disabled;
    cursor: default;
    pointer-events: none;
}
@mixin button(
    $size: medium,
    $expand: false,
    $background: $button-background,
    $background-hover: $button-background-hover,
    $color: $button-color,
    $style: $button-style,
    $radius: $button-radius
) {
    @extend %button;
    @include button-size($size);
    @include button-expand($expand);
    @include button-style($background, $background-hover, $color, $style);
}
@include exports(button) {
    .button {
        @include button;
        &.tiny {
            @include button-size(tiny);
        }
        &.small {
            @include button-size(small);
        }
        &.large {
            @include button-size(large);
        }
        &.expand {
            @include button-expand;
        }
        &.secondary {
            @include button-style($secondary-color, auto);
        }
        &.success {
            @include button-style($success-color, auto);
        }
        &.warning {
            @include button-style($warning-color, auto);
        }
        &.alert {
            @include button-style($alert-color, auto);
        }
        &.info {
            @include button-style($info-color, auto);
        }
        &.dark {
            @include button-style($dark-color, auto);
        }
        @if $button-style != hollow {
            &.hollow {
                @include button-style($style: hollow);
                &.secondary {
                    @include button-style($secondary-color, $style: hollow);
                }
                &.success {
                    @include button-style($success-color, $style: hollow);
                }
                &.warning {
                    @include button-style($warning-color, $style: hollow);
                }
                &.alert {
                    @include button-style($alert-color, $style: hollow);
                }
                &.info {
                    @include button-style($info-color, $style: hollow);
                }
                &.dark {
                    @include button-style($dark-color, $style: hollow);
                }
            }
        }
        &.disabled {
            @include button-disabled;
        }
    }
    @if $button-tag-selector {
        button {
            @extend .button;
        }
    }
}
