.main-toggle-shape {
    min-width: 88px;  
    padding: 8px 20px; 
    font-variation-settings: "wdth" 75;
    text-transform: uppercase;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    gap: 8px; 
    border-radius: 32px;
    font-size: 1rem;
    font-weight: var(--bold);
    margin: 10px 0;
    border: var(--Stroke-Default) 1px solid;
    transition: all .2s ease-out;
    scale: 1;
}

.main-toggle-shape .icon {
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
}

.main-toggle-shape .btn-label.on-hover {
    display: none;
}

.main-toggle-shape .btn-label.default {
    display: inline;
}

.main-toggle-shape:hover .btn-label.on-hover {
    display: inline;
}

.main-toggle-shape:hover .btn-label.default {
    display: none;
}

.main-toggle-shape .icon.on-hover {
    display: none;
}

.main-toggle-shape .icon.default {
    display: inline;
}

.main-toggle-shape:hover .icon.on-hover {
    display: inline;
}

.main-toggle-shape:hover .icon.default {
    display: none;
}

/* PRIMARY - NORMAL */
.toggle-yellow {
    background-color: var(--Surface-Background-Primary-Default);
    color: var(--Content-Information-Primary);
}

.toggle-yellow:hover {
    background-color: var(--Surface-Background-Primary-Hovered);
    color: var(--Content-Dynamic-Hovered);
}

.toggle-yellow:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.toggle-yellow:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
    scale: 0.98;
}


/* SECONDARY - NORMAL */
.toggle-secondary-black {
    background-color: var(--Surface-Background-Secondary-Default);
    color: var(--Content-Information-Inverted);
}

.toggle-secondary-black .icon path {
    fill: var(--Content-Information-Inverted);
}

.toggle-secondary-black:hover {
    background-color: var(--Surface-Background-Secondary-Hovered);
    color: var(--Content-Dynamic-Inverted-Hovered);
    cursor: pointer;
}

.toggle-secondary-black:hover .icon path {
    fill: var(--Content-Dynamic-Inverted-Hovered);
}

.toggle-secondary-black:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid; 
    scale: 0.98;
}

.toggle-secondary-black:active .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

/* TERTIARY NORMAL*/
.toggle-tertiary-white {
    background-color: var(--Surface-Background-Tertiary-Default);
    color: var(--Content-Information-Primary);
    border: var(--Stroke-Default) 1px solid;
}

.toggle-tertiary-white:hover {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
    cursor: pointer;
}

.toggle-tertiary-white:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.toggle-tertiary-white:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid; 
    scale: 0.98;
}

/* Toggle unactive*/
.toggle-unactive {
    background-color: var(--Surface-Background-Tertiary-Default);
    color: var( --Content-Dynamic-Unactive);
    border: var(--Stroke-Default) 1px solid;
}

.toggle-unactive {
    pointer-events: none;
    cursor: default;
}


/* Toggle QUATERNARY */
.toggle-quaternary{
    background-color: transparent;
    color: var(--Content-Information-Primary);
}

.toggle-quaternary:hover{
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
}

.toggle-quaternary:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.toggle-quaternary:active{
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    scale: 0.98;
}

.toggle-quaternary:focus,
.toggle-quaternary:focus-visible {
    background-color: transparent; 
    outline: none; 
    border: var(--Stroke-Default) 1px solid; 
}




/* Icon only */
.icon-toggle-shape {
    font-variation-settings: "wdth" 75;
    text-decoration: none;
    text-align: center;
    width: 40px;         
    height: 40px;        
    padding: 0;           
    border-radius: 999px;  
    font-weight: var(--bold);
    margin: 10px 0;
    border: var(--Stroke-Default) 1px solid;
    display: inline-flex;    
    align-items: center;     
    justify-content: center; 
    transition: all .2s ease-out;
    scale: 1;
}

.icon-toggle-shape .icon {
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
}


/* PRIMARY */
.icon-toggle-primary {
    background-color: var(--Surface-Background-Primary-Default);
    color: var(--Content-Information-Primary);
}

.icon-toggle-primary:hover {
    background-color: var(--Surface-Background-Primary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    cursor: pointer;
}

.icon-toggle-primary:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.icon-toggle-primary:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
    scale: 0.98;
}

/* SECONDARY */
.icon-toggle-black {
    background-color: var(--Surface-Background-Secondary-Default);
    color: var(--Content-Information-Inverted);
}

.icon-toggle-black:hover .icon path {
    fill: var(--Content-Information-Inverted);
}

.icon-toggle-black:hover {
    background-color: var(--Surface-Background-Secondary-Hovered);
    color: var(--Content-Dynamic-Inverted-Hovered);
    cursor: pointer;
}

.icon-toggle-black:hover .icon path {
    fill: var(--Content-Dynamic-Inverted-Hovered);
}

.icon-toggle-black:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid; 
    scale: 0.98;
}

.icon-toggle-black:active .icon path {
    fill: var(--Content-Dynamic-Hovered);
}


/* TERTIARY */
.icon-toggle-white {
    background-color: var(--Surface-Background-Tertiary-Default);
    color: var(--Content-Information-Primary);
    border: var(--Stroke-Default) 1px solid;
}

.icon-toggle-white:hover {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
    cursor: pointer;
}

.icon-toggle-white:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.icon-toggle-white:active {
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Information-Primary);
    border: var(--Stroke-Default) 1px solid; 
    scale: 0.98;
}

.icon-toggle-white:active .icon path {
    fill: var(--Content-Dynamic-Hovered);
}


/* UNACTIVE */
.icon-toggle-unactive{
    background-color: var(--Surface-Background-Tertiary-Default);
    color: var(--Content-Dynamic-Unactive);
}

.icon-toggle-unactive {
    pointer-events: none;
    cursor: default;
}


/* QUATERNARY */
.icon-toggle-quaternary{
    color: var(--Content-Information-Primary);
    background-color: transparent;
    border: transparent;
}

.icon-toggle-quaternary:hover{
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
}

.icon-toggle-quaternary:hover .icon path {
    fill: var(--Content-Dynamic-Hovered);
}

.icon-toggle-quaternary:active{
    background-color: var(--Surface-Background-Tertiary-Hovered);
    color: var(--Content-Dynamic-Hovered);
    border: var(--Stroke-Default) 1px solid;
    scale: 0.98;
}

.icon-toggle-quaternary:focus,
.icon-toggle-quaternary:focus-visible {
    background-color: transparent; 
    outline: none; 
    border: var(--Stroke-Default) 1px solid; 
}