.btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    box-sizing: border-box;
    height: $button-height;
    padding: $button-padding-y $button-padding-x;
    color: var(--digital-blue-80);
    font-weight: var(--main-font-bold);
    font-size: $button-font-size;
    font-family: var(--main-font);
    line-height: $button-line-height;
    white-space: nowrap;
    text-transform: none;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: middle;
    background-color: var(--white);
    border: $button-border-width solid var(--digital-blue-80);
    border-radius: $button-border-radius;
    cursor: pointer;

    .icon:not(.documentation-link) {
        fill: var(--digital-blue-80);
    }

    &:active {
        color: var(--digital-blue-100);
        border-color: var(--digital-blue-100);

        .icon {
            fill: var(--digital-blue-100);
        }
    }

    &:focus {
        @include focus-border;

        text-decoration: none;
        background-color: var(--white);
    }

    &:hover {
        color: var(--digital-blue-100);
        border-color: var(--digital-blue-100);
        outline-color: var(--digital-blue-100);

        .icon {
            fill: var(--digital-blue-100);
        }
    }

    &:disabled,
    &.state-disabled {
        color: var(--grey-60);
        border-color: var(--grey-40);
        cursor: default;
        pointer-events: none;

        .icon {
            fill: var(--grey-60);
        }
    }

    &.mod-small {
        gap: 9px;
        height: $button-small-height;
        padding: $button-small-padding-y $button-small-padding-x;
        font-size: $button-small-font-size;
        line-height: $button-small-line-height;
    }

    &.mod-large {
        height: $button-large-height;
    }

    &.mod-primary {
        color: var(--white);
        background-color: var(--digital-blue-60);
        border: $button-border-width solid var(--digital-blue-60);

        &:active {
            background-color: var(--digital-blue-100);
            border: $button-border-width solid var(--digital-blue-100);
        }

        &:focus {
            background-color: var(--digital-blue-40);
            border: $button-border-width solid var(--digital-blue-40);
        }

        &:hover {
            background-color: var(--digital-blue-80);
            border: $button-border-width solid var(--digital-blue-80);
            outline-color: var(--digital-blue-80);
        }

        &:disabled,
        &.state-disabled {
            color: var(--grey-60);
            background-color: var(--grey-40);
            border: $button-border-width solid var(--grey-40);

            .icon {
                fill: var(--grey-60);
            }
        }

        .icon {
            fill: var(--white);
        }
    }

    &.mod-danger {
        color: var(--white);
        background-color: var(--critical-70);
        border: $button-border-width solid var(--critical-70);

        &:active {
            background-color: var(--critical-100);
            border: $button-border-width solid var(--critical-100);
        }

        &:focus {
            background-color: var(--pomegranate-red-60);
            border: $button-border-width solid var(--pomegranate-red-60);
            box-shadow: 0 0 0 4px rgb(var(--pomegranate-red-70-rgb) / 20%);
        }

        &:hover {
            background-color: var(--pomegranate-red-80);
            border: $button-border-width solid var(--pomegranate-red-80);
            outline-color: var(--pomegranate-red-80);
        }

        &:disabled,
        &.state-disabled {
            color: var(--grey-60);
            background-color: var(--grey-40);
            border: $button-border-width solid var(--grey-40);

            .icon {
                fill: var(--grey-60);
            }
        }

        .icon {
            fill: var(--white);
        }
    }

    &.mod-link {
        background-color: transparent;
        border: none;
    }

    & + .btn,
    + .btn-container {
        margin-left: $button-margin-width;
    }

    .confirm-icon-error,
    .confirm-icon-success {
        display: none;
    }

    &.mod-confirm-success,
    &.mod-confirm-error {
        position: relative;
        color: transparent;
        outline: 0;
        transition: background-color 0.2s ease;
        user-select: none;

        &::before {
            position: absolute;
            top: $button-height + 6px;
            font-size: 11px;
            text-transform: initial;
            opacity: 0;
            animation: vp-fadeIn ease-in 1;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;
        }

        &.mod-confirm-right::before {
            right: 0;
        }

        &.mod-confirm-left::before {
            left: 0;
        }

        .confirm-icon-error,
        .confirm-icon-success {
            position: absolute;
            top: calc(50% - #{$button-confirm-icon-width} / 2);
            right: calc(50% - #{$button-confirm-icon-width} / 2);
            display: inline-block;
            font-size: $button-confirm-icon-width;
            fill: var(--white);
        }
    }

    &.mod-confirm {
        margin-bottom: $button-confirm-margin-bottom;
    }

    &.mod-confirm-success {
        background-color: var(--bright-turquoise-40);
        border: $button-border-width solid var(--bright-turquoise-40);

        &:focus,
        &:hover {
            background-color: var(--bright-turquoise-40);
            outline-color: var(--bright-turquoise-40);
        }

        &::before {
            color: var(--bright-turquoise-40);
            content: attr(data-confirm-success);
        }

        .confirm-icon-error {
            display: none;
        }
    }

    &.mod-confirm-error {
        background-color: var(--critical-70);
        border: $button-border-width solid var(--critical-70);

        &:focus,
        &:hover {
            background-color: var(--critical-70);
            outline-color: var(--critical-70);
        }

        &::before {
            color: var(--critical-70);
            content: attr(data-confirm-error);
        }

        .confirm-icon-success {
            display: none;
        }
    }

    &.collapsible-header {
        border-radius: 0;
    }

    &.mod-loading {
        .loading-spinner {
            display: none;
        }

        &:disabled .loading-spinner,
        &.state-disabled .loading-spinner {
            display: inline-block;
        }

        &.mod-primary:disabled .loading-spinner,
        &.mod-primary.state-disabled .loading-spinner {
            --loading-spinner-color-inside: var(--grey-40);
        }
    }
}

button {
    font-family: var(--main-font);
}

.btn-container {
    display: inline-block;
    margin: 0;
    vertical-align: middle;

    .btn[disabled] {
        pointer-events: none;
    }

    & + .btn,
    + .btn-container {
        margin-left: $button-margin-width;
    }
}

.btn-hover:hover {
    .icon {
        fill: var(--bright-turquoise-40);
    }

    .btn-hover-text {
        color: var(--rain-forest-green-30);
    }
}

// override the style of the focus for buttons in Firefox
@supports (-moz-appearance: none) {
    .btn:focus {
        outline-style: solid;
        outline-offset: -2px;
    }
}