.button {
    width: 100%;
    background-color: transparent;
    cursor: pointer;
    border: 0;
    border-radius: $border-radius-xs;
    display: inline-block;
    padding: calc(#{$margin-m/1.5}) $margin-m;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-family: $font-secondary;
    transition: all .2s cubic-bezier(.28,.48,.58,.86);

    background-color: $c-button;
    color: $c-white;

    @include mediaWQuery($media-query-s) {
        width: auto;
        padding: calc(#{$margin-m/1.5}) $margin-xl;
    }

    &:hover,
    &:active,
    &:focus {
        background-color: $c-button-hover;
        color: $c-white;
    }

    &--rounded {
        padding: $margin-m $margin-l;
        border-radius: $border-radius-l;
    }

    &--smaller {
        padding: calc(#{$margin-m/1.5}) $margin-l;
        font-size: rem(16);
    }

    &--upper {
        text-transform: uppercase;
    }

    &--square {
        padding: calc(#{$margin-m/1.5}) $margin-m;
    }

    &--with-icon {
        display: flex;
        align-items: center;
    }

    &--centered {
        width: auto;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    &--shadow {
        display: inline-block;
        position: relative;
        border-radius: $border-radius-s;
        z-index: 5;
        transform: translateY(-7px);
        transition: .2s ease;

        &::before, &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            border-radius: $border-radius-s;
            transition: .3s;
        }

        &::after {
            bottom: -7px;
            z-index: -2;
            background: $c-button-hover;
        }

        &::before {
            background: $c-button;
            top: 0;
            z-index: -1;
        }

        &:hover,
        &:focus {
            transform: translateY(-5px);
            &::after { bottom: -5px }
            &::before {
                background: lighten($c-button-hover, 5%);
                //top: 7px;
            }
        }

        &:active {
            transform: translateY(0);
            &::after { bottom: 0 }
            &::before {
                background: $c-button-hover;
                //top: 7px;
            }
        }
    }

    // Define all variants
    $variants-button: (
        ('primary', $c-button-primary, $c-button-primary-hover, $c-black),
        ('secondary', $c-button-secondary, $c-button-secondary-hover, $c-white),
        ('tertiary', $c-button-tertiary, $c-button-tertiary-hover, $c-black),
        ('lighter', $c-brown-lighter, $c-brown-light, $c-black)
    );


    @each $label, $basic-color, $hover-color, $text-color in $variants-button {
        &--#{$label} {
            background-color: $basic-color;
            color: $text-color;
    
            &::before { background-color: $basic-color }
            &::after { background-color: $hover-color }
    
            &:hover,
            &:focus {
                background-color: $hover-color;
                color: $text-color;
                &::before { background-color: lighten($hover-color, 10%) }
            }

            &:active {
                &::before { background-color: $hover-color }
            }
        }
    }

    &--unstyled {
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        font-family: $font-secondary;
        cursor: pointer;
    }
}

.button-container {
    &--centered {
        display: block;
        text-align: center
    }

    &--spaced {
        padding: $margin-xl 0;
    }
}