@import 'variables';

.button {
    display: block;
    width: 100%;
    color: $brand-cyan;
    text-align: center;
    border-radius: .25rem;
    padding: $spacer / 4 $spacer / 2;
    transition-property: all;
    background: rgba(#fff, .15);
    border: .05rem solid rgba($brand-cyan, .75);
    font-size: $font-size-small;
    text-transform: uppercase;
    cursor: pointer;

    @media (min-width: 30rem) {
        display: inline-block;
        width: auto;
    }

    svg {
        fill: $brand-grey-light;
        margin-right: $spacer / 3;
        transition: .2s ease-out;
        margin-bottom: -.1rem;
        width: $font-size-small;
        height: $font-size-small;
    }

    &:hover,
    &:focus {
        color: lighten($brand-cyan, 10%);
        border-color: rgba(lighten($brand-cyan, 10%), .75);
        transform: translate3d(0, -.1rem, 0);
        box-shadow: 0 6px 10px rgba($brand-main, .1),
            0 10px 25px rgba($brand-main, .05);
    }

    &:active {
        transition: none;
        background: rgba(#fff, .15);
    }

    :global(.dark) & {
        background: darken($body-background-color--dark, 1%);

        &:hover,
        &:focus {
            box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
                0 10px 25px rgba(darken($brand-main, 20%), .2);
        }
    }
}