// @import "../core/core";

@mixin dc-btn {
    display: inline-block;
    padding: $dc-space100 - .1 $dc-space100;
    transition: box-shadow .2s linear, border-color .2s linear;
    border: 1px solid $dc-gray50;
    border-radius: $dc-radius100;
    background: linear-gradient($dc-white, darken($dc-white, 7%));
    color: $dc-gray10;
    font-size: $dc-body-font-size;
    font-weight: $dc-normal-font-weight;
    line-height: $dc-space100;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    box-shadow: 0 1px 1px transparent;
    cursor: pointer;
    vertical-align: top;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px transparentize($dc-blue40, 0.5);
    }

    &:hover {
        outline: 0;
        background: linear-gradient($dc-white, darken($dc-white, 5%));
        color: $dc-gray10;
        text-decoration: none;
        box-shadow: 0 1px 1px rgba($dc-black, .2);
    }

    &[disabled] { @include dc-btn--disabled }

    @content;
}

//  = LINK BUTTON
//  ---------------------------------------------------------------------------
@mixin _dc-btn--link-reset {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

@mixin dc-btn--link {
    @include _dc-btn--link-reset;
    transition: color .1s linear;
    color: $dc-link-color;

    &:hover {
        @include _dc-btn--link-reset;
        color: $dc-link-color-hover;
    }

    &:focus {
        box-shadow: 0 0 0 2px transparentize($dc-link-color, 0.5);
    }
}

@mixin dc-btn--link-disabled {
    @include _dc-btn--link-reset;
    color: $dc-gray50;

    &:hover,
    &:active {
        border: 1px solid transparent;
    }
}

//  = PRIMARY
//  ---------------------------------------------------------------------------

@mixin dc-btn--primary {
    border-color: darken($dc-blue40, 7%);
    background: linear-gradient($dc-blue40, darken($dc-blue40, 7%));
    color: $dc-white;

    &:hover {
        background: lighten($dc-blue40, 3%);
        color: $dc-white;
    }
}

//  = DESTROY
//  ---------------------------------------------------------------------------

@mixin dc-btn--destroy {
    transition: box-shadow .2s linear;

    &:active {
        border-color: $dc-red40;
        background: $dc-red50;
        color: $dc-white;
    }

    &:hover {
        border-color: $dc-red40;
        background: $dc-red50;
        color: $dc-white;
    }
}

//  = DISABLED
//  ---------------------------------------------------------------------------

@mixin dc-btn--disabled {
    border-color: $dc-gray60;
    background: transparent;
    color: $dc-gray50;
    box-shadow: none;
    pointer-events: none;
}

//  = ACTIVE
//  ---------------------------------------------------------------------------

@mixin dc-btn--active {
    background: darken($dc-gray70, 3%);
    box-shadow: inset 0 1px 1px rgba($dc-black, .2);
}

//  = SMALL BUTTON
//  ---------------------------------------------------------------------------

@mixin dc-btn--small {
    padding: $dc-space50 + .1 $dc-space75;
    font-size: $dc-font50;
    text-transform: uppercase;
    @content;
}

//  = INLINE BUTTON
//  -----------------------------------------------------------------------------
@mixin dc-btn--inline($sibling-selector: ".dc-btn--inline") {
    margin-bottom: 0;

    + #{$sibling-selector} {
        margin-left: .2rem; // Account for 4px inline margin
    }
}

//  = LARGE BUTTON
//  ---------------------------------------------------------------------------

@mixin dc-btn--large {
    padding: $dc-space125 $dc-space125 $dc-space125;
    font-size: $dc-font150;
    line-height: .8;

    @content;
}

//  = BLOCK BUTTON
//  ---------------------------------------------------------------------------

@mixin dc-btn--block {
    display: block;
    width: 100%;
}

//  = GROUPED BUTTON
//  ---------------------------------------------------------------------------

@mixin _dc-btn--grouped {
    margin-right: 0;
    margin-bottom: 0;
    border-left-width: 0;
    border-radius: 0;

    &:first-child {
        border-left-width: 1px;
        border-top-left-radius: $dc-radius100;
        border-bottom-left-radius: $dc-radius100;
    }

    &:last-child {
        border-top-right-radius: $dc-radius100;
        border-bottom-right-radius: $dc-radius100;
    }
}

@mixin dc-btn--no-focus {
    &:focus {
        outline: none;
        box-shadow: none;
    }
}

@mixin dc-btn-selectors {
    .dc-btn {  @include dc-btn;  }

    .dc-btn--link {  @include dc-btn--link;  }

    .dc-btn--primary {  @include dc-btn--primary;  }

    .dc-btn--destroy {  @include dc-btn--destroy; }

    .dc-btn--disabled { @include dc-btn--disabled; }

    .dc-btn--active { @include dc-btn--active; }

    .dc-btn--small {  @include dc-btn--small;  }

    .dc-btn--inline {  @include dc-btn--inline;  }

    .dc-btn--large {  @include dc-btn--large;  }

    .dc-btn--block {  @include dc-btn--block;  }

    .dc-btn--no-focus { @include dc-btn--no-focus; }

    // special case (usually this kind of selectors should be avoided)
    .dc-btn--link.dc-btn--disabled {  @include dc-btn--link-disabled;  }
}