@import "styles/_mixins.scss";
@import "styles/_typography.scss";

.faq-radio {
    margin-top: 120px;
    padding-bottom: 120px;
    .label {
        margin: 0 auto;
        width: fit-content;
        display: block;
    }
    h2 {
        text-align: center;
        margin: 24px auto 80px;
        max-width: 700px;
    }
    &__container {
        display: flex;
        gap: 20px;
    }
    &-menu {
        position: sticky;
        top: 136px;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 0 1 calc(100% / 12 * 5 - 10px);
        &__item {
            position: relative;
            border-radius: 8px;
            height: fit-content;
            border: 1px solid var(--Grey);
            background-color: var(--White);
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 24px;
            cursor: pointer;
            transition: background-color 0.4s;

            input[type="radio"] {
                opacity: 0;
                position: absolute;
            }

            .radio-button {
                width: 24px;
                height: 24px;
                aspect-ratio: 1/1;
                border: 1.5px solid var(--Grey);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.4s;

                &::after {
                    content: "";
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: var(--Blue-purple);
                    opacity: 0;
                    transition: 0.4s;
                }
            }
            &:hover {
                background-color: var(--Light-Grey);
                .radio-button {
                    border: 1.5px solid var(--Blue-purple);
                }
            }

            &.active {
                background-color: var(--Light-Grey);
                .radio-button {
                    border: 1.5px solid var(--Blue-purple);
                    &::after {
                        opacity: 1;
                    }
                }
            }
        }
    }
    &-content {
        flex: 0 1 calc(100% / 12 * 7 - 10px);
        &-body {
            padding: 32px;
            border-radius: 8px;
            background-color: var(--Light-Grey);
            display: grid;
            gap: 24px;
            transition: max-height 0.5s ease-in-out;
            overflow: hidden;
            h4 {
                @include body1;
            }
            p {
                @include body2;
            }

            h4,
            p {
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            &.fade-in {
                h4,
                p {
                    opacity: 1;
                }
            }
        }
    }
    &__help {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 32px;
        border-radius: 8px;
        background: var(--Purple-gradient);
        margin-top: 8px;
        .description2 {
            color: var(--White);
        }
    }
    @include w($lg) {
        &__container {
            flex-direction: column;
        }
        &-menu {
            position: static;
        }
    }

    @include w($sm) {
        h2 {
            margin: 16px auto 40px;
        }
        &-menu {
            &__item {
                padding: 20px 24px;
                grid-area: 16px;
                .radio-button {
                    width: 20px;
                    height: 20px;
                    &::after {
                        height: 10px;
                        width: 10px;
                    }
                }
            }
        }
        &-content {
            &-body {
                padding: 24px;
            }
        }
        &__help {
            padding: 24px;
            flex-direction: column;
        }
    }
}

• [F] index.jsx
  Delete
• [F] styles.scss
  Delete