@inkline/inkline/components/IButton/style.scss

@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/colors';
@import 'css/sizes';

/**
 * Button
 */
.button {
    display: inline-flex;
    font-weight: var(----font-weight);
    font-size: var(----font-size);
    line-height: var(----line-height);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border-style: var(----border-style);
    border-width: var(----border-width);
    border-color: var(----border-color);
    border-radius: var(----border-radius);
    box-shadow: var(----box-shadow);
    padding: var(----padding);
    justify-content: center;
    align-items: center;
    transition-property: background-color, border-color, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-easing);
    color: var(----color);
    background: var(----background);

    // Target non disabled buttons
    &:not(:disabled):not(.-disabled) {
        // Add "hand" cursor to non-disabled .button elements
        cursor: pointer;

        // Focus and hover state
        &:hover,
        &:focus,
        &.-hovered,
        &.-focused {
            ----background: var(----background--hover);
            ----border-color: var(----border-color--hover);
            text-decoration: none;
            color: var(----color);
            outline: 0;
        }

        &:active,
        &.-active {
            ----background: var(----background--active);
        }
    }

    // Disabled state
    // Disabled state comes first so active can properly restyle
    &.-disabled,
    &:disabled {
        opacity: var(----opacity--disabled);
        box-shadow: none;
    }

    // Block buttons
    // Make buttons span the whole parent width
    &.-block {
        display: block;
        width: 100%;

        + .button.-block {
            margin-left: 0;
            margin-top: var(----block--margin);
        }
    }

    // Link buttons
    // Make a button look and behave like a link
    &.-link {
        ----color: var(----link--color);
        box-shadow: none;
        background-color: transparent;
        border-color: transparent;

        &:not(:disabled):not(.-disabled) {
            &:hover,
            &:focus,
            &:active,
            &.-hovered,
            &.-focused,
            &.-active {
                ----color: var(----link--color--active);
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
                text-decoration: underline;
            }
        }

        &:disabled,
        &.-disabled {
            pointer-events: none;
        }
    }

    // Outline buttons
    // Remove button background and add a beautiful transition on hover
    &.-outline {
        background: transparent;
        color: var(----background);
        border-color: var(----background);
        ----box-shadow: none;

        &:not(:disabled):not(.-disabled) {
            &:hover,
            &:focus,
            &:active,
            &.-hovered,
            &.-focused,
            &.-active {
                ----border-color: var(----border-color--hover);
                background: var(----background);
                color: var(----color);
            }
        }
    }

    // Circle button
    &.-circle {
        ----border-radius: 100%;
        width: var(----circle--size);
        height: var(----circle--size);
        padding: 0;
    }

    .loader {
        margin-top: spacing('1/4');
        margin-bottom: spacing('1/4');
        width: var(----font-size);
        height: var(----font-size);

        > svg > circle {
            stroke: var(----color) !important;
        }
    }

    //
    // Button group border accent
    //

    .button-group:not(.-vertical) > &:not(:first-child) {
        ----border-left-color: var(----background--hover);
    }

    .button-group.-vertical > &:not(:first-child) {
        ----border-top-color: var(----background--hover);
    }
}

// Future-proof disabling of clicks on `<a>` elements
a.button.-disabled,
*:disabled a.button {
    pointer-events: none;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
    &.-block {
        width: 100%;
    }
}