.od-radio-group {
    display: flex;
    overflow: hidden;
    padding: 5px;
    background: color-var(gray,100);
    width: fit-content;
    @extend %rounded-full;
    input[type='radio'].od {
        appearance: none;
        border-radius: 0 !important;
        position: relative;
        z-index: 0;
        min-width: 120px;
        min-height: 40px;
        border: none;
        border-top: 1px solid color-var(indigo, 500) !important;
        border-bottom: 1px solid color-var(indigo, 500) !important;
        cursor: pointer;
        background-color: transparent;
        border-left: 1px solid color-var(indigo, 500) !important;
        border-right: 1px solid color-var(indigo, 500) !important;

        // Rounded edges for first and last
        &:first-child {
            border-top-left-radius: 20px !important;
            border-bottom-left-radius: 20px !important;
        }

        &:last-child {
            border-top-right-radius: 20px !important;
            border-bottom-right-radius: 20px !important;
        }

        &::before {
            content: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-weight: 500;
            color: var(--gray-800);
        }

        &:checked {
            background-color: color-var(indigo, 600);

            &::before {
                color: white;
            }
        }

        // 🌙 Dark Mode Styling
        html.dark & {
            border-color: color-var(indigo, 400) !important;
            background-color: color-var(gray,900);

            &::before {
                color: var(--gray-200);
            }

            &:checked {
                background-color: color-var(indigo, 400);

                &::before {
                    color: var(--gray-900);
                }
            }
        }
    }

    html.dark & {
        background-color: color-var(gray,800);
    }

}

.od-radio-group.card {
    display: flex;
    width: 100%;
    overflow-x: auto;
    gap: 15px;
    overflow: hidden;
    background-color: transparent !important;
    border-radius: 0 !important;

    input[type=radio].od {
        appearance: none;
        border-radius: 0 !important;
        position: relative;
        z-index: 0;
        max-width: fit-content;
        max-height: fit-content;
        row-gap: 8px;
        width: 100%;
        display: flex;
        flex-direction: column;
        border: 1.5px solid color-var(indigo, 500);
        border-radius: .5rem !important;
        cursor: pointer;
        background-color: transparent;

        &::before {
            display: block;
            content: var(--text);
            font-size: 25px;
            width: fit-content;
            height: fit-content;
            font-weight: bold;
            color: var(--gray-800);
        }

        &::after {
            display: block;
            content: var(--desc);
            font-size: 14px;

        }

        &:checked {
            background-color: color-var(indigo, 600);

            &::before,
            &::after {
                color: white;
            }
        }

        // 🌙 Dark Mode Styling
        html.dark & {
            border-color: color-var(indigo, 400) !important;

            &::before {
                color: var(--gray-200);
            }

            &:checked {
                background-color: color-var(indigo, 400);

                &::before {
                    color: var(--gray-50);
                }

            }
        }
    }


}
