@import '../mixins';

.wizard-wrapper {
    display: flex;

    .wizard-meta {
        width: 270px;
        min-height: 440px;
        margin-top: 38px;
        flex-shrink: 0;

        .studip-icon {
            display: block;
            margin: auto;
        }

        p {
            margin: 15px 0;
        }

        .wizard-requirements {
            span {
                font-weight: 700;
            }

            ul {
                padding: 4px 0;

                li {
                    list-style: none;

                    button {
                        display: inline-flex;
                        align-items: center;
                        gap: 4px;
                        padding: 2px 0;
                        background-color: transparent;
                        border: none;
                        color: var(--color--highlight);
                        cursor: pointer;

                        &:hover {
                            color: var(--color--highlight-hover);
                        }
                    }
                }
            }
        }
    }

    .wizard-content-wrapper {
        flex-grow: 2;
        margin-left: 15px;

        h2 span.required {
            color: var(--red);
        }

        .wizard-progress {
            list-style: none;
            padding: 0;
            margin: 1.5em 0 2.5em 0;

            li {
                display: inline-block;
                position: relative;
                margin-right: 60px;
                border: solid 2px var(--color--highlight);

                button {
                    display: inline-flex;
                    justify-content: center;
                    padding: 6px 0;
                    height: 36px;
                    width: 36px;
                    cursor: pointer;
                    background: no-repeat;
                    border: none;
                    color: var(--color--highlight);
                }

                &.valid {
                    background-color: var(--color--highlight);
                    button {
                        color: var(--color--highlight-contrast);
                    }
                }

                &.invalid {
                    background-color: var(--color--global-background);
                }

                &.optional {
                    border: dashed thin var(--color--highlight);
                }

                &::before {
                    position: absolute;
                    content: "";
                    width: 62px;
                    border: solid thin var(--color--highlight);
                    top: 50%;
                    transform: translateY(-50%);
                    left: 100%;
                }

                &.active::after {
                    position: absolute;
                    content: "";
                    width: 38px;
                    height: 3px;
                    background: var(--color--highlight);
                    top: 44px;
                    left: -1px;
                }
            }

            li:last-child {
                margin-right: 0;

                &::before {
                    display: none;
                }
            }

        }

        .wizard-list {
            list-style: none;
            padding: 0;

            .wizard-item {
                .wizard-content {
                    max-width: 555px;
                    max-height: 475px;
                    overflow-y: auto;
                    scrollbar-width: thin;
                    scrollbar-color: var(--color--highlight) var(--dark-gray-color-5);

                    .wizard-required {
                        color: var(--color--warning);
                    }

                    textarea {
                        resize: vertical;
                    }

                    input[type="text"]::placeholder,
                    textarea::placeholder {
                        color: var(--dark-gray-color-60);
                    }
                }
            }
        }
    }
}


form.default fieldset.radiobutton-set {
    >legend {
        margin: 0px;
        width: 100%;
    }

    border: none;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;

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

        &:focus+label {
            outline: auto;
        }
    }

    >label {
        cursor: pointer;
        border: 1px solid var(--color--radiobuttonset-border);
        background-color: var(--color--radiobuttonset-background);
        transition: background-color 200ms;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px;
        margin-bottom: 0;
        border-top: none;

        :not(.undecorated) {
            text-indent: 0;
        }

        >.text {
            width: 100%;
            margin-left: 10px;
        }

        >.unchecked {
            margin-right: 0;
        }

        >.check {
            display: none;
        }
        >.icon,
        >.studip-icon {
            color: var(--color--highlight);
        }
    }

    >label:first-of-type {
        border-top: 1px solid var(--color--radiobuttonset-border);
    }

    >label:last-child::after {
        content: none;
    }

    >div {
        border: 1px solid var(--color--radiobuttonset-border);
        border-top: none;
        display: none;
        padding: 10px;

    }

    >input[type=radio]:checked+label {
        background-color: var(--color--radiobuttonset-background-selected);
        transition: background-color 200ms;

        >.unchecked {
            display: none;
        }

        >.check {
            display: inline-block;
        }
    }

    >input[type=radio]:checked+label+div {
        display: block;

        .description {
            animation-duration: 400ms;
            animation-name: terms_of_use_fadein;
        }
    }
}

@include media-breakpoint-small-down {
    .wizard-wrapper {

        .wizard-meta {
            display: none;
        }

        .wizard-content-wrapper .wizard-progress {
            li {
                margin-right: 30px;

                &::before {
                    width: 32px;
                }
            }
        }
    }
}

@include media-breakpoint-tiny-down {
    .wizard-wrapper {
        .wizard-meta {
            display: none;
        }

        .wizard-content-wrapper .wizard-progress {
            li {
                margin-right: 8px;

                &::before {
                    width: 10px;
                }
            }
        }
    }
}