/** @format */

.btn {
    appearance: none;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    color: $white;
    border: none;
    padding: 10px 24px 6px 24px;
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 300ms ease-in-out;
    text-align: center;
    border-radius: 24px;
    &:focus {
        outline: none;
    }

    &:hover {
        text-decoration: none;
        color: $white;
        cursor: pointer;
    }
    &.btn--green {
        background: $green;
        color: $white;
        border: 2px solid $green;
        &:hover {
            background: darken($green, 7.5%);
            border: 2px solid darken($green, 7.5%);
        }
    }
    &.btn--grey {
        background-color: $grey_lightest;
        color: $navy;
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        &:hover {
            background-color: $light_grey;
        }
    }
    &.btn--blue {
        background: $blue_bright;
        color: $white;
        border: 2px solid $blue_bright;
        &:hover {
            background: darken($blue_bright, 7.5%);
            border: 2px solid darken($blue_bright, 7.5%);
        }
    }
    &.btn--navy {
        background: $navy;
        color: $white;
        border: 2px solid $navy;
        &:hover {
            background: lighten($navy, 10%);
            border: 2px solid lighten($navy, 10%);
        }
    }
    &.btn--black {
        background: $black;
        color: $white;
        border: 2px solid $black;
        &:hover {
            background: lighten($black, 10%);
            border: 2px solid lighten($black, 10%);
        }
    }
    &.btn--red {
        background: $red;
        color: $white;
        border: 2px solid $red;
        &:hover {
            background: darken($red, 10%);
            border: 2px solid darken($red, 10%);
        }
    }
    &.btn--outline {
        background: transparent;
        color: $black;
        border: 2px solid #d0d5dd;
        box-sizing: border-box;
        &:hover {
            background: $black;
            color: $white;
            border: 2px solid $black;
        }
    }
    &.btn--bordered {
        background: transparent;
        color: $black;
        border: 2px solid $navy;
        box-sizing: border-box;
        &:hover {
            background: $navy;
            color: $white;
            border: 2px solid $navy;
        }
    }
    &.btn--large {
        font-size: 20px;
        line-height: 1em;
        padding-left: 1em;
        padding-left: 1em;
    }
    &.btn--small {
        font-size: 14px;
        line-height: 1em;
    }
    &.btn--block {
        display: block;
    }
    &.btn--white {
        background: $white;
        color: $navy;
        border: 2px solid $white;
        &:hover {
            background: darken($white, 7.5%);
            border: 2px solid darken($white, 7.5%);
        }
    }
    &.btn--order {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        &::after {
            content: "";
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-bottom: 3px;
        }
    }
}