@use "../abstracts/mixins.scss" as *;

.btn--solid{
    font-weight: 600;
    font-size: 1.2rem;

    background-color: var(--color-txt);
    color: var(--white);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--unit)*1.5);
    min-width: calc(var(--unit)*1.5);
    border-radius: var(--radius-btn);
    cursor: pointer;

    a{
        color: white;
        text-decoration: none;
        padding: 0px 1ch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}


.btn-action {
    border: 1px solid var(--color-txt-light);
    height: calc(var(--unit)*1.25);
    background-color: var(--white);

    border-radius: var(--radius-btn);
    cursor: pointer;

    a{
        display: flex;
        align-items: center;
        gap: 1ch;
        text-decoration: none;
        color: var(--color-txt);
        padding: 0 1ch;
    }
  
    .icon{
        @include icon(20px);
       
    }
 
    .text{
        font-size: var(--fs-small);
        font-weight: 500;
    }
    &:hover{
        border-color: var(--color-txt);
    }
  
}  

.btn-download .icon{
    @include icon(16px); 
}

label.btn-action{
    display: inline-flex;
    align-items: center;
    gap: 1ch;
    text-decoration: none;
    color: var(--color-txt);
    padding: 0 1ch;
    .text{
            font-weight: 700;
    }
}





.link-with-arrow{
    a{
        text-decoration: none;
        color: var(--color-txt);
        font-size: var(--fs-small);
        &::after{
            content: "→";
            font-family: var(--font-title);
            font-size: 0.9em;
            position: relative;
            left: 1.5ch;
            transition: left .4s ease-in-out;
            text-decoration: 1px underline transparent;
        }
    }
    &:hover{
        opacity: 0.8;
   
        a::after{
            left: 2.5ch;
        }

    }
}