// guttnerburge default button
$btn-bg: var(--primary);
.wp-block-button {
    &__link {
        background-color: $btn-bg;
        color: $white !important;
        font-size: $font-size-base;
        line-height: 1.5;
        padding: rem-calc(7 12);
        font-weight: 500;
        min-width: 150px;
        @include transition;
    }
    &.is-style-outline {
        .wp-block-button__link {
            padding: rem-calc(5 12);
            border-color: var(--primary);
            color: var(--primary);
            &:hover {
                background-color: var(--primary);
                color: $white;
            }
        }
    }
}

// theme button
.btn {
    font: italic 600 18px/1.333334 $font-family-secondary;
    min-width: 165px;
    border-radius: 0;
    padding: 15px;
    background: $primary;
    color: $text;
    // border: 1px solid $primary;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    text-transform: uppercase;
    z-index: 0;

    @include breakpoint(md) {
        min-width: 183px;
    }

    &:before {
        content: '';
        position: absolute;
        right: -9px;
        top: 9px;
        bottom: -9px;
        left: 25px;
        border: 1px solid $primary;
        transition: 0.3s ease;
        z-index: -1;
    }

    &:focus {
        outline: none;
        box-shadow: none;
    }

    &:not(.closed):hover {
        background: transparent;
        color: $dark-green;

        &:before {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }

    &.btn-secondary {
        background: $yellow;

        &:before {
            border-color: $yellow;
        }

        &:hover {
            background: transparent;
            color: $yellow;
        }
    }

    &-back {
        display: inline-flex;
        color: $text;
        position: relative;
        padding-left: 42px;
        font: italic 600 24px/1.3333 $font-family-secondary;
        letter-spacing: -0.5px;
        margin-bottom: 20px;
        text-transform: uppercase;

        @include breakpoint(lg) {
            margin-bottom: 37px;
        }

        &:hover {
            &:before {
                // right: -10px;
                opacity: 0.7;
            }
        }

        &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            background: url('assets/images/icon-arrow-back.svg') no-repeat;
            background-size: 100%;
            width: 24px;
            height: 24px;
            // transition: right 0.3s linear;
            transform: translateY(-50%);
        }
    }

    &-view {
        font: italic 600 16px/1.5 $font-family-secondary;
        letter-spacing: 0.11em;
        color: $primary;

        &:hover {
            color: darken($primary, 10%);
        }
    }
}