@import "../variables";

a {
    transition: color $animation-default $animation-default-bezier-curve;
    text-decoration: none;

    &:hover, &:focus {
        text-decoration: none;
    }
}

.sg-link {
    color: $sgLink;

    &:hover {
        color: $sgLinkHover;
    }

    &__btn {
        border: 1px solid $sgInputBorder;
        color: $sgBodyText;
        padding: ($spacer * .32) ($spacer * .5);
        border-radius: $sg-border-radius;
        transition: border-color $animation-default $animation-default-bezier-curve;
        line-height: 2.2;
        font-size: $size-14px;

        &:hover {
            border: 1px solid $sgBodyText;
            color: $sgBodyText;
        }

        &.-active {
            border-color: $sgSecondary;
            color: $sgLink;
        }

        &.-warning {
            border-color: orange;
            color: orange;

            &:hover {
                color: orange;
                opacity: .8;
            }
        }

        &.-danger {
            border-color: $sgDanger;
            color: $sgDanger;

            &:hover {
                color: $sgDanger;
                opacity: .8;
            }
        }
    }
}