@import '../../helpers/_functions.scss';
@import '../../helpers/_mixins.scss';
@import '../../helpers/_selectors.scss';
@import '../../helpers/_size.scss';
@import '../core/theme.scss';

/* BUTTONS */

/* Button styling */
/* Un-themed */

#{$button-selectors} {
    line-height: 2rem;
    overflow: hidden;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: center;
    transition: all var(--animation-duration);
    background-color: var(--btn-color);
    border-color: var(--btn-border-color);
    color: var(--btn-fg);
    font-size: 0.75rem;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
    font-family: Montserrat;
    min-width: 2rem;
    user-select: none;
    margin-bottom: 1rem;
    outline: none;
    --btn-color: #{map-get($grays, '000')};
    --btn-fg: #{map-get($grays, '700')};
    --btn-border-color: #{map-get($grays, '200')};

    /* Base States */
    &:hover {
        transition: all var(--animation-duration);
        --btn-color: #{map-get($grays, '100')};
        color: var(--btn-fg);
    }

    &:active {
        transition: var(--animation-duration) ease;
    }

    &:focus {
        outline: none;
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.5;

        &:active {
            pointer-events: none;
        }
    }

    &.outline {
        --btn-color: transparent;

        &:hover {
            --btn-color: #{map-get($grays, '200')};
        }
    }

    /* Loading Button*/
    /* Make the loading circle, if present, white when button is active */
    &.loading:active::after {
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        transition: var(--animation-duration) ease;
    }

    /* Animated Button */
    &.btn-animated {
        transition: calc(var(--animation-duration) / 2) ease;

        &:active {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
            transition: calc(var(--animation-duration) / 2) ease;
        }
    }

    /* Close Button */
    &.btn-close {
        background-color: rgba(10, 10, 10, 0.2);
        border: none;
        border-radius: 290486px;
        cursor: pointer;
        display: inline-block;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 0;
        height: 20px;
        outline: 0;
        position: relative;
        vertical-align: top;
        width: 20px;
        padding: 0;
        min-width: 20px;

        &:hover {
            background-color: rgba(10, 10, 10, 0.3);
        }

        /* Render the x in the close button */
        @mixin btn-close-x($height, $width) {
            background-color: var(--cirrus-bg);
            content: '';
            display: block;
            left: 50%;
            position: absolute;
            top: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            -webkit-transform-origin: center center;
            transform-origin: center center;
            height: $height;
            width: $width;
        }

        &::before {
            @include btn-close-x(2px, 50%);
        }

        &::after {
            @include btn-close-x(50%, 2px);
        }
    }

    /* BUTTON STYLES */
    /* Regular */
    &.btn-transparent {
        --btn-color: transparent;
        --btn-fg: var(--cirrus-dark);
        --btn-border-color: transparent;

        &:focus {
            box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
        }
        &:hover {
            --btn-color: rgba(0, 0, 0, 0.1);
        }
        &.outline {
            --btn-fg: var(--cirrus-dark);
        }
    }

    &.btn-light {
        --btn-color: var(--cirrus-light);
        --btn-fg: var(--cirrus-dark);
        --btn-border-color: var(--cirrus-light);

        &:hover {
            --btn-color: var(--cirrus-light-hover);
        }
        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-light, 0.5);
        }
    }

    &.btn-dark {
        --btn-color: var(--cirrus-dark);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-dark);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-dark, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-dark-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-dark);
        }
    }

    &.btn-black {
        --btn-color: #000;
        --btn-fg: var(--cirrus-light);
        --btn-border-color: #000;

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-dark, 0.5);
        }
        &:hover {
            --btn-color: #000;
        }
    }

    &.btn-primary {
        --btn-color: var(--cirrus-primary);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-accent-border);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-primary, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-accent-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-primary);
        }
    }

    &.btn-info {
        --btn-color: var(--cirrus-info);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-info);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-info, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-info-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-info);
        }
    }

    &.btn-link {
        --btn-color: var(--cirrus-link);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-link);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-link, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-link-dark);
        }
        &.outline {
            --btn-fg: var(--cirrus-link);
            border: 1px solid transparent;
        }
        &.outline:hover {
            --btn-color: var(--cirrus-link-hover);
            border: 1px solid transparent;
            text-decoration: underline;
        }
    }

    &.btn-success {
        --btn-color: var(--cirrus-success);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-success);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-success, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-success-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-success);
        }
    }

    &.btn-warning {
        --btn-color: var(--cirrus-warning);
        --btn-fg: var(--cirrus-dark);
        --btn-border-color: var(--cirrus-warning);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-warning, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-warning-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-warning);
        }
    }

    &.btn-danger {
        --btn-color: var(--cirrus-danger);
        --btn-fg: var(--cirrus-light);
        --btn-border-color: var(--cirrus-danger);

        &:focus {
            box-shadow: 0 0 0 0.2rem transparentize($cirrus-danger, 0.5);
        }
        &:hover {
            --btn-color: var(--cirrus-danger-hover);
        }
        &.outline:hover {
            --btn-color: var(--cirrus-danger);
        }
    }

    /* Extra small button */
    &.btn-xsmall {
        padding: 0 0.5rem;
        font-size: 50%;
    }

    /* Small button */
    &.btn-small {
        padding: 0.25rem 1rem;
        font-size: 70%;
    }

    /* Big button */
    &.btn-large {
        padding: 0.75rem 2rem;
        font-size: 90%;
    }

    &.btn-xlarge {
        padding: 1rem 2.5rem;
        font-size: 110%;
    }

    /* STATES */
    &.btn-success {
        @include input-success();
    }

    &.btn-error {
        @include input-error();
    }

    /* GLYPHS */
    .fa-wrapper {
        // /* Override default behavior of aligning font awesome icons to the top */ FontAwesome no longer does this, no need for override
        // vertical-align: baseline;

        &.pad-right {
            margin-right: 0.4rem;
        }

        &.pad-left {
            margin-left: 0.4rem;
        }
    }

    /* Alternatives to pad-left and pad-right */
    span:first-child {
        margin-right: 0.2rem;
    }

    span:last-child {
        margin-left: 0.2rem;
    }
}

[class^='btn-']:not(.btn-container):not(.btn-close),
[class*=' btn-']:not(.btn-container):not(.btn-close) {
    background-color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    color: var(--btn-fg);
    transition: all var(--animation-duration);

    &:hover {
        background-color: var(--btn-color);
        border-color: var(--btn-border-color);
        transition: all var(--animation-duration);
    }

    /* Outline Variants */
    &.outline {
        background-color: transparent;
        color: var(--btn-color);

        &:hover {
            background-color: var(--btn-color);
            color: var(--btn-fg);
            transition: all var(--animation-duration);
        }

        &.btn-transparent {
            color: #{map-get($grays, '700')} !important;
        }
    }
}

/* Make the loader white so it is visible */
.loading.btn-accent:after {
    border: 2px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
}

/* BUTTON GROUPS */
/* Will group buttons with components in a single component */

.btn-group {
    display: -webkit-inline-box;
    display: inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;

    #{$button-selectors} {
        -ms-flex: 1 0 auto;
        -webkit-box-flex: 1;
        flex: 1 0 auto;
        margin: 0;

        &:first-child:not(:last-child) {
            /* Style the first child in group > 1 buttons */
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child:not(:first-child) {
            /* Style the last child in group > 1 buttons */
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -1px;
        }

        &:not(:first-child):not(:last-child) {
            /* Style button in middle of group */
            border-radius: 0; /* Remove roundness from center buttons */
            margin-left: -1px;
        }

        @include elevate-on-focus();
    }

    &.btn-group-fill {
        /* Makes the button group fill the width and proportion the buttons to fill the space */
        display: -webkit-box;
        display: flex;
        display: -ms-flexbox;

        #{$button-selectors} {
            -ms-flex: 1 0;
            -webkit-box-flex: 1;
            flex: 1 0; /* Make the buttons fill the available width and proportion themselves */
        }

        &:focus {
            z-index: 1;
        }
    }
}

@include screen-below('sm') {
    .btn-group {
        display: flex;
        flex-direction: column;

        #{$button-selectors} {
            margin-bottom: -1px;

            &:first-child:not(:last-child) {
                border-radius: 0.25rem 0.25rem 0 0;
            }

            &:not(:first-child):not(:last-child) {
                margin-left: 0;
            }

            &:last-child:not(:first-child) {
                border-radius: 0 0 0.25rem 0.25rem;
                margin-left: 0;
            }
        }
    }
}