@use './variables';
@use './mixins/buttons' as buttons;

.btn {
    display: inline-block;
    margin-bottom: 0; // For input.btn
    font-weight: variables.$btn-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    white-space: nowrap;
    @include buttons.button-size(
        variables.$padding-base-vertical,
        variables.$padding-base-horizontal,
        14px,
        variables.$line-height-base,
        variables.$btn-border-radius-base
    );
    user-select: none;
    border-style: solid;
    border-width: 1px;

    &:focus,
    &.focus {
        outline: none;
    }

    &:hover {
        text-decoration: none;
        outline: none;
        box-shadow: none;
    }

    &:active {
        outline: none;
        box-shadow: none;
        border-style: solid;
        transform: translateY(1px);
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: variables.$cursor-disabled;
        opacity: 0.5;
        box-shadow: none;
    }
    // Icons inside buttons
    .btn-icon {
        margin-right: 4px;
    }
}

a.btn {
    &.disabled,
    fieldset[disabled] & {
        pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
}

// Alternate buttons
// --------------------------------------------------
.btn-primary {
    @include buttons.button-variant(
        #ffffff,
        #ffffff,
        variables.get-color('primary', dark),
        variables.get-color('primary')
    );
}
.btn-secondary {
    @include buttons.button-variant(
        variables.$text-color,
        variables.$text-color,
        rgba(variables.$text-color, 0.15),
        rgba(variables.$text-color, 0.2)
    );
}
.btn-secondary-inverse {
    @include buttons.button-variant(
        variables.get-color('gray', base),
        variables.get-color('gray', base),
        variables.get-color('gray', 6x-light),
        variables.get-color('gray', 5x-light)
    );
}
.btn-danger {
    @include buttons.button-variant(
        #ffffff,
        #ffffff,
        variables.get-color('tertiary'),
        variables.get-color('tertiary', light)
    );
}
.btn-alt {
    @include buttons.button-variant(
        variables.$text-color,
        variables.get-color('primary', 2x-light),
        transparent,
        transparent,
        variables.$text-color,
        variables.get-color('primary', 2x-light)
    );
}
.btn-ghost {
    @include buttons.button-variant(
        variables.$text-color-secondary,
        variables.$text-color,
        transparent,
        rgba(variables.$text-color, 0.1)
    );
}
.btn-ghost-alt {
    @include buttons.button-variant(
        variables.$text-color-secondary,
        variables.get-color('primary', 2x-light),
        transparent,
        transparent
    );
}
.btn-activate {
    @include buttons.button-variant(
        variables.$text-color,
        variables.$text-color,
        variables.get-color('secondary', base),
        variables.get-color('secondary', light)
    );
}
// applying sizes to this element will not do anything
// as currently this button has a fixed size
.btn-carousel {
    @include buttons.button-variant(
        variables.$text-color-secondary,
        variables.get-color('primary', light),
        transparent,
        transparent
    );

    padding: 16px 0 !important;

    &:focus {
        box-shadow: none;
    }

    &,
    &.btn-carousel-next {
        margin-left: 8px;
        &:before {
            display: inline-block;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            content: '\f054';
            line-height: 1;
            font: var(--fa-font-solid);
            font-size: 1.6em;
        }
    }
    &.btn-carousel-prev {
        margin-right: 8px;
        &:before {
            content: '\f053';
        }
    }
}

.btn-link {
    padding: 0;
    display: inline-block;
    color: variables.$link-hover-color;
    background: transparent;
    border: none;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}

// Button Sizes
// --------------------------------------------------

.btn-xl {
    @include buttons.button-size(
        variables.$padding-xl-vertical,
        variables.$padding-xl-horizontal,
        variables.$font-size-xl,
        variables.$line-height-xl,
        variables.$btn-border-radius-xl
    );

    &.btn-round {
        @include buttons.button-round(
            variables.$font-size-xl,
            variables.$line-height-xl,
            variables.$padding-xl-vertical
        );
    }

    &.btn-close {
        @include buttons.button-close(
            variables.$font-size-xl,
            variables.$line-height-xl,
            variables.$padding-xl-vertical
        );
    }
}
.btn-lg {
    @include buttons.button-size(
        variables.$padding-large-vertical,
        variables.$padding-large-horizontal,
        variables.$font-size-large,
        variables.$line-height-large,
        variables.$btn-border-radius-large
    );

    &.btn-round {
        @include buttons.button-round(
            variables.$font-size-large,
            variables.$line-height-large,
            variables.$padding-large-vertical
        );
    }

    &.btn-close {
        @include buttons.button-close(
            variables.$font-size-large,
            variables.$line-height-large,
            variables.$padding-large-vertical
        );
    }
}
.btn-md {
    @include buttons.button-size(
        variables.$padding-base-vertical,
        variables.$padding-base-horizontal,
        14px,
        variables.$line-height-base,
        variables.$btn-border-radius-base
    );

    &.btn-round {
        @include buttons.button-round(14px, variables.$line-height-base, variables.$padding-base-vertical);
    }

    &.btn-close {
        @include buttons.button-close(14px, variables.$line-height-base, variables.$padding-base-vertical);
    }
}
.btn-sm {
    @include buttons.button-size(
        variables.$padding-small-vertical,
        variables.$padding-small-horizontal,
        variables.$font-size-small,
        variables.$line-height-small,
        variables.$btn-border-radius-small
    );

    &.btn-round {
        @include buttons.button-round(
            variables.$font-size-small,
            variables.$line-height-small,
            variables.$padding-small-vertical
        );
    }

    &.btn-close {
        @include buttons.button-close(
            variables.$font-size-small,
            variables.$line-height-small,
            variables.$padding-small-vertical
        );
    }
}
.btn-xs {
    @include buttons.button-size(0, 7px, 12px, 1.333333333333, 9px);

    &.btn-round {
        @include buttons.button-round(12px, 1.333333333333, 0);
    }

    &.btn-close {
        @include buttons.button-close(12px, 1.333333333333, 0);
    }
}
.btn-slim {
    padding-left: 0;
    padding-right: 0;
}
.btn-no-padding {
    padding: 0;
}

// Block button
// --------------------------------------------------

.btn-block {
    display: block;
    width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
    margin-top: 5px;
}

// Specificity overrides
input[type='submit'],
input[type='reset'],
input[type='button'] {
    &.btn-block {
        width: 100%;
    }
}
.btn-unstyled {
    background: transparent;
    border: none;
    margin: 0;
}
.dropdown {
    .btn-block {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}