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

$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%) {
    color: $white;
    background-color: $color;

    &:hover {
        background-color: shade($color, $darken-pct);
        color: $white;
    }
    &:active {
        background-color: shade($color, $darken-pct * 2);
        color: $white;
    }
    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        background-color: $gray-10;
        color: $gray-30;
    }
}

// Standard button

@mixin hc-button() {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    box-shadow: 0 3px 5px $shadow;

    @include formFieldFocusTransition();
    border: 1px solid transparent;

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

    &:focus {
        @include formFieldFocusedButtonState();
    }

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

@mixin hc-button-xs() {
    padding: 8px 10px;
    min-width: 16px;
    @include fontSize(12px);
    line-height: 14px;
}

@mixin hc-button-sm() {
    padding: 8px 10px;
    min-width: 110px;
    @include fontSize(12px);
    line-height: 14px;
}

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

@mixin hc-button-lg() {
    padding: 0 30px;
    height: 40px;
    min-width: 200px;
    @include fontSize(14px);
    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: $wcf-blue;
    height: 36px;
    line-height: 33px;
    padding-right: 19px;

    &:hover {
        color: $offblack;
    }
    &[disabled]:hover {
        color: $gray-600;
    }
}

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

    &: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;
    }
}

// Link button

@mixin hc-button-link() {
    background-color: transparent;
    color: $gray-90;
    font-weight: 600;
    box-shadow: none;
    text-decoration: underline;
    border-width: 2px;

    .hc-icon:before {
        display: inline-block;
    }

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

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

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

    &:focus {
        @include formFieldFocusedState();
    }

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

        .label,
        .value {
            color: $text;
        }
    }
}

@mixin hc-button-link-big() {
    .value {
        font-size: 16px;
        margin-top: 1px;
    }
    hc-icon.hc-icon {
        color: $gray-50;
    }
}

@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;
    box-shadow: none;
}

@mixin hc-date-range() {
    text-decoration: none;
    border: 2px solid $gray-50;
    border-radius: 0px;

    &:focus {
        @include formFieldFocusedState();
    }
}

// Icon button

@mixin hc-icon-button() {
    display: inline-block;
    position: relative;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    vertical-align: baseline;
}

// Split button

@mixin hc-split-button() {
    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-split-button-toggle-sm() {
    padding: 3px 7px !important;

    &::after {
        width: 10px !important;
        height: 6px !important;
        margin-top: 1px !important;
    }
}

@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==');
}