@use 'styles/settings.scss'as s;

.tabs-container {
    display: flex;
    justify-content: space-between;
    background: rgba(s.$white, 0.25);

    .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(50% - 20px);
        height: 50px;
        color: s.$body-color;
        font-weight: s.$weight-semi-bold;
        font-size: 14px;
        position: relative;

        &:before {
            content: ' ';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%) scaleX(0);
            height: 5px;
            width: 30px;
            background: s.$primary;
            border-radius: 3px;
            transition: s.$transition;
        }

        &.active {
            font-weight: s.$weight-bold;
            font-size: 16px;

            &:before {
                transform: translate(-50%, 50%) scaleX(1);
            }
        }
    }
}