rahmanda/ayu

// =====================================================
// Button
// =====================================================
// "We style it because the built-in is suck"

$button-prefix: "btn";
$theme-button-enable: false !default;

@if ($theme-button-enable == true) {

  .#{$button-prefix} {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-normal, border),
                    $theme-border-radius);
    display     : inline-block;
    box-sizing  : border-box;

    font-family : $theme-font-family;
    font-size   : map-get($theme-font-size, medium);
    font-weight : map-get($theme-font-weight, bold);
    text-transform: $theme-button-text-transform;
    text-decoration: none;

    letter-spacing : $theme-letter-spacing;
    word-spacing   : $theme-word-spacing;

    padding: map-get($theme-button-padding, medium);

    position : relative;

    background : map-get($theme-color-button-normal, background);
    color      : map-get($theme-color-button-normal, foreground);

    &:hover {
        background : darken(map-get($theme-color-button-normal, background), 5%);
        cursor : pointer;
    }

    // -------------------------------------------
    // Size Variants
    // -------------------------------------------

    &--small {
        padding   : map-get($theme-button-padding, small);
        font-size : map-get($theme-font-size, small);
    }

    &--large {
        padding   : map-get($theme-button-padding, large);
        font-size : map-get($theme-font-size, large);
    }

    &--x-large {
        padding   : map-get($theme-button-padding, x-large);
        font-size : map-get($theme-font-size, x-large);
    }

    &--block {
        width: 100%;
    }

    &--icon {
        padding: 0;
    }
}

// -------------------------------------------
// Grouped Button
// -------------------------------------------

.#{$button-prefix}-group,
.#{$button-prefix}-dropdown {
    position: relative;
    display: inline-block;
    font-size: 0; // hack for inline block spacing
}

.#{$button-prefix}-group {
    .#{$button-prefix}:not(:first-child):not(:last-child) {
        margin-left: -$theme-border-size;
        margin-right: -$theme-border-size;
        border-radius: 0;
    }

    .#{$button-prefix}:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .#{$button-prefix}:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .#{$button-prefix} + .#{$button-prefix} {
        margin-left: -$theme-border-size; // hack for collapse border
    }
}

// -------------------------------------------
// Color Variants
// -------------------------------------------

.#{$button-prefix}[disabled] {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-disabled, foreground),
                    $theme-border-radius);

    background : map-get($theme-color-button-disabled, background);
    color      : map-get($theme-color-button-disabled, foreground);

    &:hover {
        cursor       : not-allowed;
        background   : map-get($theme-color-button-disabled, background);
        color        : map-get($theme-color-button-disabled, foreground);
        border-color : map-get($theme-color-button-disabled, foreground);
    }
}

.#{$button-prefix}--cta {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-cta, background),
                    $theme-border-radius);

    background : map-get($theme-color-button-cta, background);
    color      : map-get($theme-color-button-cta, foreground);

    &:hover {
        background   : darken(map-get($theme-color-button-cta, background), 5%);
        color        : map-get($theme-color-button-cta, foreground);
        border-color : darken(map-get($theme-color-button-cta, background), 5%);
    }
}

.#{$button-prefix}--i-cta {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-cta, background),
                    $theme-border-radius);

    background : transparent;
    color      : map-get($theme-color-button-cta, background);

    &:hover {
        color        : darken(map-get($theme-color-button-cta, background), 5%);
        background   : transparent;
        border-color : darken(map-get($theme-color-button-cta, background), 5%);
    }
}

.#{$button-prefix}--secondary {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-secondary, background),
                    $theme-border-radius);

    background : map-get($theme-color-button-secondary, background);
    color      : map-get($theme-color-button-secondary, foreground);

    &:hover {
        background   : darken(map-get($theme-color-button-secondary, background), 5%);
        color        : map-get($theme-color-button-secondary, foreground);
        border-color : darken(map-get($theme-color-button-secondary, background), 5%);
    }
}

.#{$button-prefix}--i-secondary {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-button-secondary, background),
                    $theme-border-radius);

    background : transparent;
    color      : map-get($theme-color-button-secondary, background);

    &:hover {
        color        : darken(map-get($theme-color-button-secondary, background), 5%);
        background   : transparent;
        border-color : darken(map-get($theme-color-button-secondary, background), 5%);
    }
}

@each $social, $colors in $theme-color-button-socials {

    .#{$button-prefix}-social--#{$social} {
        @include border($theme-border-size,
                        $theme-border-style,
                        map-get($colors, background),
                        $theme-border-radius);

        background : map-get($colors, background);
        color      : map-get($colors, foreground);

        &:hover {
            background   : darken(map-get($colors, background), 5%);
            border-color : darken(map-get($colors, background), 5%);
        }
    }

}

}