@use "../01-base/typography" as *;
@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;

@mixin button-primary($bg) {
    background: $bg;
    &:hover {
      background:darken($bg,8%);
      transition: all 0.3s ease;
    }
    &:active {
      background:darken($bg,25%);
    } 
}

@mixin button-secondary($bg) {
    background: $bg;
    &:hover {
        background:darken($bg,8%);
        transition: all 0.3s ease;
    }
    &:active {
        background:darken($bg,25%);
    } 
}

@mixin button-tertiary($bg) {
    background: $bg;
    &:hover {
        background:darken($bg,8%);
        transition: all 0.3s ease;
    }
    &:active {
        background:darken($bg,25%);
    } 
}

%btn {
    @include font-primary;
    font-weight: 400;
	display: block;
	padding: 15px 68px;
	border-radius: 7px;
	font-size: 1.6rem;
    text-transform: uppercase;
    max-width: fit-content;
    @include responsive(desktop){
        padding: 15px 68px;
        font-size: 1.6rem;
    }
}

.btn-primary, a.btn-primary {
	@extend %btn;
    background-color: $accent-color;
    color: $white-color!important;
    border: 2px solid $accent-color;
    transition: all 0.3s ease;    
    &:hover{
        background-color: darken($accent-color, 8%);
        border: 2px solid darken($accent-color, 8%);
    }
}
.btn-secondary, a.btn-secondary {
	@extend %btn;
    background-color: $dark-color;
    color: $accent-color;
    border: 2px solid $white-color;
    transition: all 0.3s ease;
    &:hover{
        background-color: darken($dark-color, 8%);
        border: 2px solid $accent-color;
    }
}

.wp-block-button{
    &__link, a{
        @extend %btn;
        background-color: $accent-color!important;
        color: $white-color!important;
        border: 2px solid $accent-color!important;
    }
}

.btn-link, a.btn-link {
    font-size: 1.6rem;
    color: $dark-color;
    text-decoration: underline;
}