@import '../../styles/variables';

.button {
    border: 0;
    cursor: pointer;
    outline: 0;
    margin: 0;
    display: inline-block;
    width: fit-content;
    padding: $spacer / 4 $spacer;
    font-size: $font-size-base;
    font-family: $font-family-base;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    border-radius: 2px;
    transition: .2s ease-out;
    color: $brand-white;
    background: $brand-grey-light;
    box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .1);
    min-height: 45px;
    user-select: none;

    &:hover,
    &:focus {
        color: $brand-white;
        background: $brand-grey-light;
        text-decoration: none;
        transform: translate3d(0, -.05rem, 0);
        box-shadow: 0 12px 30px 0 rgba(0, 0, 0, .1);
    }

    &:active {
        background: $brand-grey-light;
        transition: none;
        transform: none;
        box-shadow: 0 5px 18px 0 rgba(0, 0, 0, .1);
    }

    &:disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: .5;
    }
}

.buttonPrimary {
    composes: button;
    background: $brand-gradient;

    &:hover,
    &:focus {
        background: $brand-gradient;
    }

    &:active {
        background: $brand-gradient;
    }
}

.link {
    border: 0;
    outline: 0;
    display: inline-block;
    width: fit-content;
    background: 0;
    padding: 0;
    color: $brand-pink;
    font-size: $font-size-base;
    font-weight: $font-weight-base;
    font-family: inherit;
    box-shadow: none;
    cursor: pointer;
}