/* PRIMARY */
.btn{
    display: flex;
    width: fit-content;
    border-radius: 0.5rem;
    gap: 1rem;
    transition: background-color 300ms, gap 300ms, padding-right 300ms;
    cursor: pointer;
    align-items: center;
}
.btn p{
    font-size: 1.125rem;
    line-height: 1.2;
    transition: color 300ms;
    margin-top: 1px;
    margin-bottom: -1px;
}
.btn.primary{
    padding: 1rem 1.5rem;
    background-color: var(--colormid);
    color: var(--white);
}
.btn.primary path{
    fill: var(--white);
}
.btn.primary.iconleft{
    padding-left: 1.25rem;
}
.btn.primary.iconright{
    padding-right: 1.25rem;
}
.btn.primary.notext{
    padding: 1rem 1.25rem;
}
.btn.primary.white{
    background-color: var(--white);
    color: var(--colormid);
}
.btn.primary.white path{
    fill: var(--colormid);
}
.btn.primary:hover{
    background-color: var(--colorlight);
}
.btn.primary.white:hover{
    background-color: var(--colorlight);
    color: var(--white);
}
.btn.primary.white:hover path{
    fill: var(--white);
}
/* SECONDARY */
.btn.secondary{
    color: var(--colormid);
}
.btn.secondary.white{
    color: var(--white);
}
.btn.secondary:hover{
    color: var(--colorlight);
}
.btn.secondary path{
    fill: var(--colormid);
}
.btn.secondary.white path{
    fill: var(--white);
}
.btn.secondary:hover path{
    fill: var(--colorlight);
}
/* OUTLINE */
.btn.primary.outline{
    padding: calc(1rem - 0.125rem) calc(1.5rem - 0.125rem);
    background-color: unset;
    border: solid 0.125rem var(--colormid);
    color: var(--colormid);
}
.btn.primary.outline path{
    fill: var(--colormid);
}
/* ICON */
.btn .icon{
    transition: transform 300ms 150ms, scale 300ms 150ms;
}
.btn .icon path{
    transition: fill 300ms;
}
.btn .icon.moveright{
    transform: translateX(-0.25rem);
}
.btn:hover .icon.moveright{
    transform: translateX(0.25rem);
}
.btn:hover .icon.movebottom{
    transform: translateY(0.25rem);
}
.btn:hover .icon.zoom{
    scale: 1.25;
}
@keyframes hello {
    0%{
        transform: rotate(0deg);
    }
    10%{
        transform: rotate(8deg);
    }
    20%{
        transform: rotate(-8deg);
    }
    30%{
        transform: rotate(16deg);
    }
    40%{
        transform: rotate(-8deg);
    }
    50%{
        transform: rotate(0deg);
    }
}
.btn:hover .icon.hello{
    animation: hello 1.5s ease 300ms infinite;
}