/****************************************************************
* Main Tabs
*****************************************************************/

@layer components {
    .ui-main-tabs {
        display: flex;
        justify-content: center;

        a {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: var(--spaceing-sm);
            padding: var(--spaceing-sm) var(--spaceing);
            text-transform: uppercase;
            letter-spacing: calc(2 * var(--spaceing-xxs));
            font-size: var(--font-size-xs);

            &.current {
                background: var(--solid-color, #000);
                color: var(--solid-text-color, #FFF);;
                border-bottom-left-radius: var(--rounded-md);
                border-bottom-right-radius: var(--rounded-md);
            }
        }

        @media screen and (min-width: 576px) {
            a {
                flex-direction: row;
                font-size: var(--font-size-md);
                padding: var(--spaceing-md) var(--spaceing-lg);
            }
        }
    }
}