/**
 * Buttons
 * ----------------------------------------------------------------------------
 */
button {
    &:focus {
        outline: none;
    }
}

.button {
    background-color: transparent;
    padding: $spacing--small $spacing--large;
    border: 1px solid $color-gray-85;
    color: $color-gray-85;
    font-size: rem-calc(16);
    white-space: normal;
    transition:
        color $transition,
        background $transition;

    &:hover,
    &:active {
        background-color: $color-gray-85;
        color: $color-white;
    }
}

.button--primary {
    background-color: $color-gray-75;
    color: $color-white;
}

.button--white {
    border-color: $color-white;
    color: $color-white;

    &:hover,
    &:active {
        color: $color-gray-85;
        background-color: $color-white;
    }
}

.button--black {
    color: $color-white;
    background-color: $color-black;
    border-color: $color-black;

    &:hover,
    &:active {
        color: $color-white;
        background-color: $color-gray-85;
    }
}


.button--cookies {
    padding: ($spacing--small / 2) ($spacing--large / 2);
    margin-top: 1rem;
}

@media (max-width: 480px) {
  .button--cookies {
    display: inherit;
    margin-top: 10px;
  }
}

.button--large {
    font-size: rem-calc(18);
    padding: $spacing $spacing--large;
}
