/*------------------------------------*\
    BUTTONS
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

$button__border-width: 0.125rem !default;
$button__outline-width: 0.1875rem !default;
$button__padding--x: 1rem !default;

.ds_button {
    @include helpers.ds_small-size;
    @include helpers.ds_button-sizing;
    @include helpers.ds_high-contrast-button($button__border-width);

    background: settings.$ds_colour__button__background;
    border: 0;
    border-radius: 0;
    color: settings.$ds_colour__button;
    cursor: pointer;
    display: inline-block;
    font-weight: settings.$bold;
    line-height: 1.5rem;
    position: relative;
    text-align: center;
    text-decoration-line: none;
    transition: background-color settings.$transition-out-time;

    @include helpers.ds_responsive-margin(4, bottom);

    // Margins won't collapse as inline-block.
    // Assume block margins (step 4) on preceding element/component so no top margin is needed on ds_button
    margin-top: 0;


    &:hover {
        background-color: settings.$ds_colour__button--hover__background;
        color: settings.$ds_colour__button;
        outline-color: transparent;
        transition-duration: settings.$transition-in-time;
    }

    &:focus {
        @include helpers.ds_focus($hasoutline: false);
        @include helpers.ds_focus--button;
    }

    &[disabled] {
        background-color: settings.$ds_colour__button--disabled__background;
        box-shadow: none;
        color: settings.$ds_colour__button--disabled;
        font-weight: settings.$normal;
        outline: none;
        pointer-events: none;

        @include helpers.ds_media-query-high-contrast {
            outline: 0.0625rem dashed graytext !important;
        }
    }
}

.ds_reversed .ds_button {
    background-color: settings.$ds_colour__button;
    color: settings.$ds_colour__button__background;

    &:focus,
    &:hover:focus {
        background-color: settings.$ds_colour__blocklink-bg--focus;
    }

    &:hover {
        background-color: settings.$ds_colour__blocklink-bg--hover;
    }

    &--secondary {
        background-color: transparent;
        border-color: currentColor;
        color: settings.$ds_colour__button;

        &:hover:not(:focus) {
            background-color: rgba(0, 0, 0, 0.3);
            color: settings.$ds_colour__button;
            outline-color: currentColor;
        }
    }
}

.ds_button {
    &--secondary {
        background-color: settings.$ds_colour__button--secondary__background;
        color: settings.$ds_colour__button--secondary;
        outline: $button__border-width solid currentColor;
        outline-offset: -$button__border-width;

        &:hover:not(:focus) {
            background-color: settings.$ds_colour__button--secondary--hover__background;
            color: settings.$ds_colour__button--secondary--hover;
            outline: $button__border-width solid currentColor;
            outline-offset: -($button__border-width);
        }
    }

    // DEPRECATED .ds_button--cancel is deprecated - this will be removed in a future release
    &--cancel {
        @extend .ds_button--secondary;
    }
}


// SIZE VARIANTS
.ds_button {
    &--small {
        @include helpers.ds_small-size;
        @include helpers.ds_button-sizing--small;
    }
}

// WIDTH VARIANTS
.ds_button {
    &--fixed {
        width: 12.5rem;

        &.ds_button--small {
            width: 10rem;
        }
    }

    &--max {
        max-width: 30rem;
        width: 100%;
    }
}

// BUTTONS WITH ICONS
// n.b. icon sizing is included in the ds_button-sizing mixins
.ds_button {
    .ds_icon {
        bottom: 0;
        box-sizing: content-box;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
    }

    &--has-icon {
        padding-right: calc(#{helpers.$button__height} + #{$button__padding--x});
    }

    &--has-icon--left {
        padding-left: calc(#{helpers.$button__height} + #{$button__padding--x});
        padding-right: #{$button__padding--x};

        .ds_icon {
            left: 0;
            right: auto;
        }
    }
}