.in2studyfinder-wizard-progress {
    counter-reset: wizard-step;
    display: flex;

    /* Remove list style without affecting semantics. */
    list-style-type: '';
    margin: 0 0 2rem;
    padding: 0;
}

.in2studyfinder-wizard-progress__step {
    align-items: center;
    color: var(--primary-4);
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 0.75rem;
    gap: 0.5rem;
    position: relative;
    text-align: center;

    &:not(:last-child)::after {
        background-color: var(--primary-2);
        block-size: 0.063rem;
        content: '';
        inline-size: calc(100% - 2rem);
        inset-block-start: 1rem;
        inset-inline-start: calc(50% + 1rem);
        position: absolute;
        transition: background-color 0.3s;
    }

    &.is-done::after {
        background-color: var(--accent-4);
    }

    &:not(:last-child):not(.is-done) .in2studyfinder-wizard-progress__number {
        text-indent: 1px;
    }

    & button {
      align-items: center;
      appearance: none;
      background-color: transparent;
      border: none;
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }
}

.in2studyfinder-wizard-progress__number {
    align-items: center;
    block-size: 2rem;
    border-radius: 50%;
    border: 0.063rem solid var(--primary-2);
    display: flex;
    font-weight: 500;
    inline-size: 2rem;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;


    .is-active & {
        background-color: var(--accent-4);
        border-color: var(--accent-4);
        color: #ffffff;
    }

    .is-done & {
        background-color: var(--accent-4);
        border-color: var(--accent-4);
        color: #ffffff;
        font-size: 0;

        &::after {
            block-size: 0.5rem;
            border-block-end: 0.125rem solid #ffffff;
            border-inline-start: 0.125rem solid #ffffff;
            content: '';
            display: block;
            inline-size: 0.75rem;
            transform: rotate(-45deg) translate(0.1rem, -0.1rem);
        }
    }
}

.in2studyfinder-wizard-progress__label {
    display: none;

    @media (min-width: 43.75em) {
        display: block;
    }


    .is-active & {
        color: var(--primary-4);
    }

    .is-done & {
        color: var(--primary-4);
    }
}

.in2studyfinder-wizard-step {


    & > header,
    & > h2 {

        & + * {
          margin-block-start: 2rem;
        }
    }
}

.in2studyfinder-wizard-options {
    --gibki-gutter-vertical: 1.25rem;
    --gibki-gutter-horizontal: 1.25rem;

    margin-block-end: 1.5rem;
}

.in2studyfinder-wizard-option {
    align-items: center;
    block-size: 100%;
    border: 0.063rem solid var(--primary-2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 0;
    min-block-size: 6.25rem;
    padding: 1.25rem;
    position: relative;
    transition: border-color 0.2s;
    user-select: none;

    &:hover,
    &:has(:focus-visible) {
        border-color: var(--accent-4);
    }

    & span {
        color: var(--primary-4);
        font-weight: 500;
    }
}

.in2studyfinder-wizard-option input[type="radio"],
.in2studyfinder-wizard-option input[type="checkbox"] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.in2studyfinder-wizard-option:has(input:checked) {
    border-color: var(--accent-4);

    & span {
        color: var(--accent-4);

        &::before {
            background-color: var(--accent-4);
            block-size: 2rem;
            color: #ffffff;
            content: '';
            inline-size: 2rem;
            inset-block-start: 0;
            inset-inline-end: 0;
            position: absolute;
        }

        &::after {
            block-size: 0.5rem;
            border-block-end: 0.125rem solid #ffffff;
            border-inline-start: 0.125rem solid #ffffff;
            content: '';
            inline-size: 0.875rem;
            inset-block-start: 0.625rem;
            inset-inline-end: 0.5rem;
            position: absolute;
            transform: rotate(-45deg);
        }
    }
}

.in2studyfinder-wizard-option:has(input:disabled) {
    border-color: #e0e0e0;
    cursor: not-allowed;

    & span {
        cursor: not-allowed;
        opacity: 0.4;
    }
}

.in2studyfinder-wizard-results {
    margin-block-end: 2rem;

    & > [class*="flex__"] {
        display: flex;
    }
}

.in2studyfinder-wizard-result-item {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    position: relative;

    & .c-in2studyfinder-item {
        flex: 1;
    }

    & .c-in2studyfinder-item-links {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-end;
        margin-block-start: 2.222rem;
    }

    & .c-in2studyfinder-item-link {
        inline-size: auto !important;
        margin-block-start: 0 !important;
        min-inline-size: fit-content;
    }
}

.in2studyfinder-wizard-result-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;

    & img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
    }
}

.in2studyfinder-wizard-navigation {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}