@import "../variables";
@import "../mixins/transform-scale";

.sg-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: ($spacer * 0.375) ($spacer * 0.75);
    line-height: 1.5;
    background-color: $sgPrimary;
    border-radius: $size-3px;
    color: $sgSecondary;
    cursor: pointer;
    font-family: $font-frank-new;
    font-size: $size-18px;
    padding: $size-7-5px $size-32px;
    text-transform: uppercase;

    &:not([href]):not([tabindex]) {
        color: $sgSecondary;

        &:hover {
            color: $sgSecondary;
        }
    }

    &:not(:disabled) {
        &:hover {
            background-color: $sgPrimaryHover;
            color: $sgSecondary;
        }
    }

    &:not(:disabled):focus {
        box-shadow: none;
    }

    &:focus {
        outline: 0;
    }

    &--xsmall {
        font-size: $size-11px;
        padding: $size-3px $size-8px;
    }

    &--small {
        font-size: $size-13px;
        padding: $size-9-5px $size-8px;
    }

    &--large {
        @include media-breakpoint-up(md) {
            padding: $size-15-5px $size-32px;
        }
    }

    &--secondary {
        background-color: $sgSecondary;
        color: $sgPrimary;

        &:not([href]):not([tabindex]) {
            color: $sgPrimary;
    
            &:hover {
                color: $sgPrimary;
            }
        }

        &:not(:disabled) {
            &:hover {
                background-color: $sgSecondaryHover;
                color: $sgPrimary;
            }
        }
    }

    &--tertiary {
        background-color: $white;
        border: 1px solid $sgTertiary;
        color: $sgTertiary;

        &:not([href]):not([tabindex]) {
            color: $sgTertiary;
    
            &:hover {
                color: $sgTertiary;
            }
        }

        &:not(:disabled) {
            &:hover, &:focus {
                background-color: $sgTertiaryHover;
                color: $sgTertiary;
            }

        }
    }

    &--shadow {
        box-shadow: $box-shadow-button;
    }

    &--label {
        color: $white;
    }

    &:not(:disabled):active {
        @include transformScale();
    }

    &:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

}