.basic-button {
    --btn-color-bg: var(--app-color-accent-light);
    --btn-color-text: var(--app-color-accent);
    --btn-color-border: 1px solid;
    --btn-text-size: 1rem;
    
    display: flex;
    flex-direction: row;
    gap: .5rem;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    
    padding: .75rem 1rem;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5rem;
    
    z-index: 1;
    border: 0;
    position: relative;
    
    background-color: var(--btn-color-bg, transparent);
    color: var(--btn-color-text);
    font-size: var(--btn-text-size);
}

.basic-button:hover {
    color: var(--btn-color-text);
}

.basic-button * {
    color: inherit;
}

.basic-button svg {
    fill: currentColor;
    width: calc(var(--btn-text-size) * 0.825);
    aspect-ratio: 1 / 1;
}


.basic-button.variant-solid.color-primary,
.basic-button.variant-outline.color-primary:hover,
.basic-button.variant-ghost.color-primary:hover{
    --btn-color-bg: var(--app-color-primary);
    --btn-color-text: var(--app-color-primary-light);
}
.basic-button.variant-solid.color-secondary,
.basic-button.variant-outline.color-secondary:hover,
.basic-button.variant-ghost.color-secondary:hover {
    --btn-color-bg: var(--app-color-secondary);
    --btn-color-text: var(--app-color-secondary-light);
}
.basic-button.variant-solid.color-accent,
.basic-button.variant-outline.color-accent:hover,
.basic-button.variant-ghost.color-accent:hover{
    --btn-color-bg: var(--app-color-accent);
    --btn-color-text: var(--app-color-accent-light);
}


.basic-button.variant-outline.color-primary,
.basic-button.variant-ghost.color-primary,
.basic-button.variant-outline.color-secondary,
.basic-button.variant-ghost.color-secondary,
.basic-button.variant-outline.color-accent,
.basic-button.variant-ghost.color-accent {
    --btn-color-bg: transparent;
}


.basic-button.variant-outline.color-primary,
.basic-button.variant-ghost.color-primary{
    --btn-color-text: var(--app-color-primary);
}
.basic-button.variant-outline.color-secondary,
.basic-button.variant-ghost.color-secondary{
    --btn-color-text: var(--app-color-secondary);
}
.basic-button.variant-outline.color-accent,
.basic-button.variant-ghost.color-accent,
.basic-button.variant-ghost.color-glass{
    --btn-color-text: var(--app-color-accent);
}


.basic-button.variant-outline.color-primary {
    --btn-color-border: var(--app-color-primary);
}
.basic-button.variant-outline.color-secondary {
    --btn-color-border: var(--app-color-secondary);
}
.basic-button.variant-outline.color-accent {
    --btn-color-border: var(--app-color-accent);
}

.basic-button.color-glass{
    --btn-color-bg: var(--app-color-content);
}
.basic-button.color-glass:hover {
    --btn-color-bg: var(--app-color-accent-light);
}