@import './colors';
@import './functions';
@import './mixins';
@import './variables';

$btn-icon-sz: 18px;

/// Sets up colors for a button
/// @param {Color} $color - base color of the button
/// @param {Number} $darken-pct - percentage amount by which to darken color in hover(1x) and active(2x) states
/// @return {Color}

@mixin hc-color-button($color, $darken-pct: 10%) {
    @include hc-color-bg($color);

    &:focus {
        background-color: shade($color, $darken-pct * 2);
        box-shadow: 0 0 0 3px transparentize($color, 0.6);
    }
    &:hover {
        background-color: shade($color, $darken-pct);
    }
    &:active {
        background-color: shade($color, $darken-pct * 2);
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        background-color: $color;
        opacity: 0.35;
    }
}

// Standard button

@mixin hc-button() {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: none;
    border-radius: 5px;
    font-family: $default-font-family;

    &[disabled] {
        cursor: not-allowed;
    }

    &:focus {
        outline: none;
        border-bottom: none;
        box-shadow: 0 0 0 2px transparentize($primary-brand, 0.6);
    }

    &:active {
        background-image: none;
        outline: none;
    }

    // Remove Firefox's active state dotted outline b/c we have our own highlight
    &::-moz-focus-inner {
        border:0;
    }
}

@mixin hc-button-sm() {
    padding: 3px 12px;
    height: 26px;
    min-width: auto;
    @include fontSize(14px);
    line-height: 14px;
}

@mixin hc-button-md() {
    padding: 0 20px;
    height: 35px;
    min-width: 150px;
    @include fontSize(15px);
    line-height: 15px;
}

@mixin hc-button-lg() {
    padding: 0 30px;
    height: 40px;
    min-width: 200px;
    @include fontSize(17px);
    line-height: 17px;
}

@mixin hc-button-primary() {
    @include hc-color-button($primary-action);
}
@mixin hc-button-primary-alt() {
    @include hc-color-button($primary-alt-action);
}
@mixin hc-button-destructive() {
    @include hc-color-button($destructive-action);
}
@mixin hc-button-neutral() {
    @include hc-color-button($neutral-action);
}
@mixin hc-button-secondary() {
    @include hc-color-button($gray-100, 5%);
    color: $gray-600;
    border: 1.5px solid $gray-300;
    height: 36px;
    line-height: 33px;
    padding-right: 19px;

    &:hover {
        color: $offblack;
    }
    &:focus {
        box-shadow: 0 0 0 2px transparentize($primary-brand, 0.6);
    }
    &[disabled]:hover {
        color: $gray-600;
    }
}

@mixin hc-button-minimal() {
    background-color: transparent;
    color: $gray-500;

    &:hover {
        color: $offblack;
        background-color: $gray-200;
    }
    &:active {
        background-color: darken($gray-200, 5%);
    }
    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        background-color: transparent;
        color: $gray-300;
    }
}

@mixin hc-button-pagination() {
    text-transform: uppercase;
    background-color: $white;
    border: solid 2px $gray-200;
    color: $primary-brand;
    font-weight: bold;
    margin-right: 0;
    min-width: 40px;

    &:hover {
        background-color: $white;
        &[disabled] {
            color: $blue;
        }
        &:not([disabled]) {
            color: darken($primary-brand, 10%);
        }
    }

    &:focus {
        background-color: $white;
        outline: none;
        box-shadow: 0 0 0 2px transparentize($primary-brand, 0.6);
    }

    &[disabled] {
        cursor: not-allowed;
        border-bottom-color: transparentize($gray-300, 0.65);
        border-top-color: transparentize($gray-300, 0.65);
        color: transparentize($primary-brand, 0.65);
        opacity: 1;

        &:hover {
            opacity: 1;
        }
    }
}

// Link button

@mixin hc-button-link() {
    background-color: transparent;
    color: $primary-brand;
    font-weight: 600;

    .label {
        color: $gray-500;
        font-weight: 400;
        margin-right: 10px;
    }

    .value {
        color: $text;
        font-weight: 400;
        margin-right: 10px;
    }

    &:hover {
        color: lighten($primary-brand, 10%);
    }
    &:active {
        color: darken($primary-brand, 10%);
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        opacity: 0.35;
        color: $primary-brand;
        .label,
        .value {
            color: $text;
        }
    }
}

@mixin hc-button-link-inline() {
    padding: 0;
    height: auto;
    width: auto;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    white-space: inherit;
    vertical-align: inherit;
    font-family: inherit;
    border: none;

    &:focus {
        outline: none;
        border-radius: 0;
        box-shadow: 0px 2px 0 0px $primary-brand;
    }
}

// Icon button

@mixin hc-icon-button() {
    display: inline-block;
    position: relative;
    height: 35px;
    width: 35px;
    line-height: 35px;
    border-radius: 5px;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px transparentize($primary-brand, 0.6);
    }

    // Remove Firefox's active state dotted outline b/c we have our own highlight
    &::-moz-focus-inner {
        border:0;
    }
}

// Split button

@mixin hc-split-button() {
    display: inline-flex;
}

@mixin hc-split-button-wrap() {
    display: inline-flex;
}

@mixin hc-split-button-main() {
    margin-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    min-width: auto;
}

@mixin hc-split-button-toggle() {
    min-width: auto;
    padding: 8px 12px;
    margin-left: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    &::after {
        content: '';
        width: 12px;
        height: 8px;
        margin-top: 2px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4Ljk4NyIgdmlld0JveD0iMCAwIDE0IDguOTg3Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iUGF0aF81IiBkYXRhLW5hbWU9IlBhdGggNSIgY2xhc3M9ImNscy0xIiBkPSJNMTUuMzQ4LTE0LjRhLjU2MS41NjEsMCwwLDAsMC0uNzkxbC0xLjQ0Mi0xLjQzM2EuNTUxLjU1MSwwLDAsMC0uNzgyLDBMOC41MTEtMTIuMDExLDMuOS0xNi42MjRhLjU1MS41NTEsMCwwLDAtLjc4MiwwTDEuNjc0LTE1LjE5MWEuNTYxLjU2MSwwLDAsMCwwLC43OTFMOC4xMi03Ljk2M2EuNTUxLjU1MSwwLDAsMCwuNzgyLDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41MTEgMTYuNzg3KSIvPgo8L3N2Zz4K');
    }
}

@mixin hc-button-secondary-toggle() {
    min-width: auto;
    padding: 8px 12px;
    margin-left: 0;
    border-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    &::after {
        content: '';
        width: 12px;
        height: 8px;
        margin-top: 2px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4Ljk4NyIgdmlld0JveD0iMCAwIDE0IDguOTg3Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMzMzOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iUGF0aF81IiBkYXRhLW5hbWU9IlBhdGggNSIgY2xhc3M9ImNscy0xIiBkPSJNMTUuMzQ4LTE0LjRhLjU2MS41NjEsMCwwLDAsMC0uNzkxbC0xLjQ0Mi0xLjQzM2EuNTUxLjU1MSwwLDAsMC0uNzgyLDBMOC41MTEtMTIuMDExLDMuOS0xNi42MjRhLjU1MS41NTEsMCwwLDAtLjc4MiwwTDEuNjc0LTE1LjE5MWEuNTYxLjU2MSwwLDAsMCwwLC43OTFMOC4xMi03Ljk2M2EuNTUxLjU1MSwwLDAsMCwuNzgyLDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41MTEgMTYuNzg3KSIvPgo8L3N2Zz4K');
    }
}

@mixin hc-button-minimal-toggle() {
    border-left: 2px solid rgba(0, 0, 0, 0.12) !important;
}

@mixin hc-button-sm-toggle() {
    padding: 3px 7px;
    &::after {
        width: 10px;
        height: 6px;
        margin-top: 1px;
    }
}

@mixin hc-button-lg-toggle() {
    padding: 0px 16px;
    &::after {
        width: 14px;
        height: 9px;
    }
}

// Filters button

@mixin hc-filters-icon() {
    width: 19px;
    height: 19px;
    display: block;
    margin-right: 7px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjU0NjEgNDcuMjUgMTkuMjgxIDIwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMDBhZWZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iRmlsdGVyc19CdXR0b24iIGRhdGEtbmFtZT0iRmlsdGVycyBCdXR0b24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0NjEgNjcuMjUpIHJvdGF0ZSgtOTApIj4KICAgIDxwYXRoIGlkPSJQYXRoXzMwNCIgZGF0YS1uYW1lPSJQYXRoIDMwNCIgY2xhc3M9ImNscy0xIiBkPSJNOS45MzksMi45OTNWLjcxOUEuNzE5LjcxOSwwLDAsMCw4LjUuNzE5djIuMzZtMCw0Ljg5MnYxMC41OWgwYS43MTkuNzE5LDAsMSwwLDEuNDM5LDBWNy45NDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjA1NCkiLz4KICAgIDxwYXRoIGlkPSJQYXRoXzMwNSIgZGF0YS1uYW1lPSJQYXRoIDMwNSIgY2xhc3M9ImNscy0xIiBkPSJNNi40NzUsMTEuMDIzYTMuMjM3LDMuMjM3LDAsMCwwLTYuNDc1LDAsMy4yMzcsMy4yMzcsMCwwLDAsNi40NzUsMFptLTUuMDM2LDBhMS43ODQsMS43ODQsMCwxLDEsMS43ODQsMS43ODRBMS43OTMsMS43OTMsMCwwLDEsMS40MzksMTEuMDIzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNS41NTUpIi8+CiAgICA8cGF0aCBpZD0iUGF0aF8zMDYiIGRhdGEtbmFtZT0iUGF0aCAzMDYiIGNsYXNzPSJjbHMtMSIgZD0iTTU2LjkzOSwyLjk5M1YuNzE5YS43MTkuNzE5LDAsMCwwLTEuNDM5LDB2Mi4zNm0wLDQuODkydjEwLjU5aDBhLjcxOS43MTksMCwxLDAsMS40MzksMFY3Ljk0MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM5LjUyOSkiLz4KICAgIDxwYXRoIGlkPSJQYXRoXzMwNyIgZGF0YS1uYW1lPSJQYXRoIDMwNyIgY2xhc3M9ImNscy0xIiBkPSJNNTMuNDc1LDExLjAyM2EzLjIzNywzLjIzNywwLDEsMC0zLjI1MiwzLjIyM0EzLjIxOCwzLjIxOCwwLDAsMCw1My40NzUsMTEuMDIzWm0tNS4wMzYsMGExLjc4NCwxLjc4NCwwLDEsMSwxLjc4NCwxLjc4NEExLjc5MywxLjc5MywwLDAsMSw0OC40MzksMTEuMDIzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMzLjQ3NSAtNS41NTUpIi8+CiAgICA8cGF0aCBpZD0iUGF0aF8zMDgiIGRhdGEtbmFtZT0iUGF0aCAzMDgiIGNsYXNzPSJjbHMtMSIgZD0iTTMyLjUsMTYuMjg4djIuMjczYS43MTkuNzE5LDAsMCwwLDEuNDM5LDBWMTYuMm0wLTQuODkyVi43MTloMGEuNzE5LjcxOSwwLDAsMC0xLjQzOSwwVjExLjMzOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzLjE0NykiLz4KICAgIDxwYXRoIGlkPSJQYXRoXzMwOSIgZGF0YS1uYW1lPSJQYXRoIDMwOSIgY2xhc3M9ImNscy0xIiBkPSJNMjMuNSw0MC4wMjNBMy4yMzcsMy4yMzcsMCwxLDAsMjYuNzUyLDM2LjgsMy4yMTgsMy4yMTgsMCwwLDAsMjMuNSw0MC4wMjNabTUuMDM2LDBhMS43ODQsMS43ODQsMCwxLDEtMS43ODQtMS43ODRBMS43OTMsMS43OTMsMCwwLDEsMjguNTM2LDQwLjAyM1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNi43MzcgLTI2LjIxKSIvPgogIDwvZz4KPC9zdmc+Cg==');
}

// Additional color options when more than the standards are needed

@mixin hc-button-custom( $color, $darken-pct: 10%) {
    @include hc-color-button( $color, 10%);
}