/* stylelint-disable selector-no-qualifying-type, scss/no-global-function-names */

button:not(.Button),
.button {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.55rem 0.78rem;
    border: none;
    border-radius: 2px;
    background-color: $bg-color-button-default;
    color: $color-base-button;
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: all 300ms;

    & + & {
        margin-left: 5px;
    }

    &:visited {
        color: $color-base-button;
    }

    &:hover,
    &:focus {
        outline: 0;
        background-color: adjust-color($bg-color-button-default, $lightness: 8%);
        color: $color-hover-button;
    }

    &:active {
        background-color: adjust-color($bg-color-button-default, $lightness: -8%);
        color: $color-active-button;
    }

    &.info {
        background-color: $bg-color-button-info;

        &:hover,
        &:focus {
            background-color: adjust-color($bg-color-button-info, $lightness: 8%);
        }

        &:active {
            background-color: adjust-color($bg-color-button-info, $lightness: -8%);
            color: $color-active-button;
        }
    }

    &.success {
        background-color: $bg-color-button-success;

        &:hover,
        &:focus {
            background-color: adjust-color($bg-color-button-success, $lightness: 5%);
        }

        &:active {
            background-color: adjust-color($bg-color-button-success, $lightness: -5%);
            color: $color-active-button;
        }
    }

    &.warning {
        background-color: $bg-color-button-warning;

        &:hover,
        &:focus {
            background-color: adjust-color($bg-color-button-warning, $lightness: 8%);
        }

        &:active {
            background-color: adjust-color($bg-color-button-warning, $lightness: -8%);
            color: $color-active-button;
        }
    }

    &.danger {
        background-color: $bg-color-button-danger;

        &:hover,
        &:focus {
            background-color: adjust-color($bg-color-button-danger, $lightness: 8%);
        }

        &:active {
            background-color: adjust-color($bg-color-button-danger, $lightness: -8%);
            color: $color-active-button;
        }
    }

    &.outline {
        display: inline-block;
        padding: calc(0.55rem - 1px) calc(0.78rem - 1px);
        border: 1px solid $link-base-color;
        background-color: transparent;
        color: $link-base-color;
        text-decoration: none;

        &:hover,
        &:focus,
        &:visited {
            outline: 0;
            background-color: adjust-color($bg-color-button-default, $lightness: -15%);
            // stylelint-disable-next-line declaration-no-important
            color: $link-hover-color !important;
        }

        &:active {
            background-color: adjust-color($bg-color-button-default, $lightness: -15%);
            color: $link-base-color;
        }
    }

    &[disabled] {
        cursor: not-allowed;
        opacity: 0.6;
    }
}
