/* ======================================= */
/* BUTTONS */
/* ======================================= */
.button-wrapper{
    line-height: 0;    
}

.primary-btn,
.outline-btn{
    position: relative;
    
    display: block;
    position: relative;    
    
    
    font: 400 14px/1.5 var(--font);
    text-align: center;
    text-transform: uppercase;
    
    padding: 9px 0;
    width: 100%;
    
    border: 1px solid var(--common);
    border-radius: 3px;
    
    
    cursor: pointer;
    user-select: none;
    outline: none;
    
    box-sizing: border-box;
}

.primary-btn{
    color: var(--light);
    
    background: var(--common);
}

.outline-btn{
    color: var(--common);
    
    background: var(--light);
}

.icon-link{
    display: inline-flex;
    align-items: center;
    
    color: var(--primary);
    font: 400 18px/1.5 var(--font);
}

.icon-link__icon{
    margin-left: 8px;
}

@media screen and (min-width: 1025px){
    .primary-btn,
    .outline-btn,
    .icon-link{
        transition: color var(--dur) ease-in-out, border var(--dur) ease-in-out, background-color var(--dur) ease-in-out
    }
    
    .primary-btn:hover{
        color: var(--common);
        
        background-color: var(--light);
    }
    
    .outline-btn:hover{
        color: var(--light);
        
        border-color: var(--primary);
        background-color: var(--primary);
    }
    
    .icon-link:hover{
        color: var(--warning);
    }
    
    .icon-link:hover .arrow-link-icon.line{
        stroke: var(--warning);
    }
}


@media screen and (max-width: 1024px){
    
}

@media screen and (max-width: 767px){
    
}