/* 
토글 버튼
- 사용예시 :
<div class="tgls">
    <input type="radio" id="day1-talks" name="day" value="day1" checked>
    <label for="day1-talks">Day1</label>
    
    <input type="radio" id="day2-talks" name="day" value="day2">
    <label for="day2-talks">Day2</label>

    <div class="bg"></div>
</div>
*/

:root {
    --tgl-label-width: 85px;
}


.tgls {
    position: relative;
    display: flex;
    height: 32px;
    width: fit-content;
    border-radius: 9999px;
    overflow: hidden;
}

.tgls .bg {
    position: absolute;
    width: var(--tgl-label-width);
    height: calc(100%);
    background-color: #E6002C;
    border-radius: 9999px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.tgls input[type="radio"] {
    display: none;
}

.tgls label {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s ease;
    width: var(--tgl-label-width);
}

/* background 이동 */
.tgls input:nth-of-type(1):checked ~ .bg {
    transform: translateX(0%);
}
.tgls input:nth-of-type(2):checked ~ .bg {
    transform: translateX(100%);
}
.tgls input:nth-of-type(3):checked ~ .bg {
    transform: translateX(200%);
}
.tgls input:nth-of-type(4):checked ~ .bg {
    transform: translateX(300%);
}

/* 텍스트 색상 변경 */
.tgls input:checked + label {
    color: #fff;
}

@media (max-width: 768px) {
    :root {
        --tgl-label-width: 70px;
    }
    .tgls {
        height: 28px;
    }
    .tgls label {
        font-size: 12px;
    }
}