@layer theme, base, components, utilities;

:root {
    --popup-opacity: 1;
    --popup-blur-content: 0;
}

@layer theme {
    :root {
        --font-weight-bold: 700;
    }
}

@layer utilities {
    .font-bold {
        font-weight: var(--font-weight-bold);
    }

    .hidden {
        display: none;
    }

    .mx-auto {
        margin-inline: auto;
    }

    /* Typography text-align */
    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .text-justify {
        text-align: justify;
    }

    .text-start {
        text-align: start;
    }

    .text-end {
        text-align: center;
    }

    .underline {
        text-decoration-line: underline !important;
    }
}

.language-switcher {
    display: flex;
    gap: .25rem;
    font-size: .75rem;
    inset-inline-end: 0;
    justify-content: end;
    padding: .25rem;
    position: absolute;
    z-index: 100;

    a {
        background-color: #fff;
        border-radius: .25rem;
        color: var(--black);
        display: block;
        padding: .25rem;
    }

    a.active {
        background-color: var(--button-background-color);
        color: var(--button-text-color);
    }
}