.CTA, .state-layer{
    display: inline-block;
    width: fit-content;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    

    font-family: 'Figtree';
    font-size: 16px;
    font-weight: 500;
    line-height: 125%;
    opacity: 100%;
    transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
}

.state-layer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: fit-content;
    gap: 8px;
    transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
}

.icon{
    height: 20px;
    width: 20px;
    fill: currentColor;
}



.disabled{
    pointer-events: none;
}



/* TEXT */
.filled{
    background-color: var(--primary);
    color: var(--secondary);
}
.filled > .state-layer{
    padding-inline: 16px;
}

.filled.icol > .state-layer{
    padding-left: 12px;
}

.filled.icor>.state-layer{
    padding-right: 12px;
}

/* Hovered */
.filled:hover > .state-layer{
    background-color: var(--color-sl-16);
}

/* Pressed */
.filled:active{
    box-shadow: none;
}
.filled:active .state-layer{
    background-color: var(--color-sl-32);
}

/* Focused */
.filled:focus-visible{
    box-shadow: inset 0 0 0 2px var(--white);
}
.filled:focus-visible > .state-layer{
    background-color: var(--color-sl-16);
}

/* Disabled */
.filled.disabled{
    color: #BAC4BD64;
}




/* TEXT */
.text{
    color: var(--primary);
}
.text > .state-layer{
    padding-inline: 16px;
}

.text.icol > .state-layer{
    padding-left: 12px;
}

.text.icor>.state-layer{
    padding-right: 12px;
}

/* Hovered */
.text:hover > .state-layer{
    background-color: var(--text-sl-16);
}

/* Pressed */
.text:active{
    box-shadow: none;
}
.text:active .state-layer{
    background-color: var(--text-sl-32);
}

/* Focused */
.text:focus-visible{
    box-shadow: inset 0 0 0 2px var(--white);
}
.text:focus-visible > .state-layer{
    background-color: #A6D8B316;
}

/* Disabled */
.text.disabled{
    color: #BAC4BD64;
}