bitwarden-browser/src/scss/buttons.scss

@import "variables.scss";

.btn, .vault .footer button, .modal-footer button {
    border-radius: $border-radius;
    padding: 7px 15px;
    border: 1px solid #000000;
    font-size: $font-size-base;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;

    @include themify($themes) {
        background-color: themed('buttonBackgroundColor');
        border-color: themed('buttonBorderColor');
        color: themed('buttonColor');
    }

    &.primary {
        @include themify($themes) {
            color: themed('buttonPrimaryColor');
        }
    }

    &.danger {
        @include themify($themes) {
            color: themed('buttonDangerColor');
        }
    }

    &:hover:not([disabled]) {
        cursor: pointer;

        @include themify($themes) {
            background-color: darken(themed('buttonBackgroundColor'), 1.5%);
            border-color: darken(themed('buttonBorderColor'), 17%);
            color: darken(themed('buttonColor'), 10%);
        }

        &.primary {
            @include themify($themes) {
                color: darken(themed('buttonPrimaryColor'), 6%);
            }
        }

        &.danger {
            @include themify($themes) {
                color: darken(themed('buttonDangerColor'), 6%);
            }
        }
    }

    &:focus:not([disabled]) {
        cursor: pointer;
        outline: 0;

        @include themify($themes) {
            background-color: darken(themed('buttonBackgroundColor'), 6%);
            border-color: darken(themed('buttonBorderColor'), 25%);
        }
    }

    &[disabled] {
        opacity: 0.65;
        cursor: default !important;
    }

    &.block {
        display: block;
        width: 100%;
    }

    &.link {
        border: none !important;
        background: none !important;

        &:focus {
            text-decoration: underline;
        }
    }
}

.action-buttons {
    .btn {
        &:focus {
            outline: auto;
        }
    }
}

.btn-submit {
    position: relative;
    overflow: hidden;

    .fa-spinner {
        position: absolute;
        display: none;
        align-items: center;
        justify-content: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    &:disabled:not(.manual), &.loading {
        .fa-spinner {
            display: flex;
        }

        span {
            visibility: hidden;
        }
    }
}