@import "variables.scss";

.btn {
    background-color: $button-backgound-color;
    border-radius: $border-radius;
    padding: 7px 15px;
    border: 1px solid $button-border-color;
    font-size: $font-size-base;
    color: $button-color;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;

    &.primary {
        color: $button-color-primary;
    }

    &.danger {
        color: $button-color-danger;
    }

    &:hover:not([disabled]) {
        cursor: pointer;
        background-color: darken($button-backgound-color, 1.5%);
        border-color: darken($button-border-color, 17%);
        color: darken($button-color, 10%);

        &.primary {
            color: darken($button-color-primary, 6%);
        }

        &.danger {
            color: darken($button-color-danger, 6%);
        }
    }

    &:focus:not([disabled]) {
        cursor: pointer;
        background-color: darken($button-backgound-color, 6%);
        border-color: darken($button-border-color, 25%);
        outline: 0;
    }

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

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

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

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