@import url('../animations/fall-down.css');
@import url('./textinput.css');
@import url('./radio-checkbox.css');
@import url('./input-line.css');
@import url('./spacing.css');
@import url('../themes/secondary.css');

.care-question {
    position: relative;
    overflow: hidden;
    margin-top: var(--apVspacingLarge);
    margin-bottom: var(--apVspacingLarge);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-top: var(--apBorderWidth) solid var(--apNeutralLightColor);
    border-bottom: var(--apBorderWidth) solid var(--apNeutralLightColor);
    display: block;
    padding: var(--apVspacingXLarge) var(--apContainerSidePadding);    
    max-width: var(--apContainerWidthTight);
}
.care-question__step {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--apContainerWidthXtight);
}
.care-question__step.care-question__step--hidden {
    display: none
}

.care-question__title {
    font-size: var(--apFontSizeXlarge);
    line-height: var(--apLineHeightXlarge);
}
.care-question__title.care-question__title--main {
    font-size: var(--apFontSizeLarge);
    line-height: var(--apLineHeightLarge);
    margin-bottom: var(--apHspacingLarge);
}
.care-question__title.care-question__title--small {
    font-size: var(--apFontSizeLarge);
    line-height: var(--apLineHeightLarge);
}
.care-question__title.care-question__title--xsmall {
    font-size: var(--apFontSizeDefault);
    line-height: var(--apLineHeightDefault);
    margin-bottom: var(--apVspacingUnit);
}

.care-question__form {
    display: block;
    margin: 0 auto var(--apHspacing);
    padding: 0;
}
.care-question__form.care-question__form--inline {
    display: inline;
}
.care-question__form.care-question__form--left {
    text-align: left;
}

.care-question.care-question--footer {
    max-width: none;
    border-top: 0;
    border-bottom: 0;
    background-color: var(--apNeutralXlightColor);
}

.care-question.care-question--transparent {
    background-color: transparent;
}

.care-question.care-question--active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-color: var(--apThemeSecondaryBgColor);
    background-color: var(--apThemeSecondaryBgColor);
    --apTextColor: var(--apThemeSecondaryTextColor);
    color: var(--apTextColor);
    --apMutedTextColor: var(--apThemeSecondaryMutedTextColor);
    --apLinkColor: var(--apThemeSecondaryLinkColor);
    --apLinkHoverColor: var(--apThemeSecondaryLinkHoverColor);
    --apButtonDefaultBgColor: var(--apThemeSecondaryButtonDefaultBgColor);
    --apButtonDefaultFgColor: var(--apThemeSecondaryButtonDefaultFgColor);
    --apButtonDefaultHoverBgColor: var(--apThemeSecondaryButtonDefaultHoverBgColor);
    --apButtonDefaultHoverFgColor: var(--apThemeSecondaryButtonDefaultHoverFgColor);
    --apInputBorderColor: var(--apThemeSecondaryInputBorderColor);
    --apInputBorderFocusColor: var(--apThemeSecondaryInputBorderFocusColor);
    --apInputBorderSelectedColor: var(--apThemeSecondaryInputBorderSelectedColor);
    --apInputDisabledBgColor: var(--apThemeSecondaryInputDisabledBgColor);
    --apInputDotColor: var(--apThemeSecondaryInputDotColor);
    --apOutlineColor: var(--apThemeSecondaryOutlineColor);
    --apOutlineColorAlt: var(--apThemeSecondaryOutlineColorAlt);
}

.care-question.care-question--active.care-question.care-question--active-animate {
    background: linear-gradient(
        -35deg,
        var(--apNeutralXlightColor) 49%,
        var(--apSecondaryColor) 50.1%);
    background-size: 800% 800%;
    animation: carequestion-show-focus-step 0.8s var(--swiftOutAnimationFunction) forwards;        
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > * {
    animation: fall-down 400ms linear both;
    animation-delay: 550ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(1) {
    animation-delay: 250ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(2) {
    animation-delay: 300ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(3) {
    animation-delay: 350ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(4) {
    animation-delay: 400ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(5) {
    animation-delay: 450ms;
}
.care-question.care-question--active.care-question.care-question--active-animate .care-question__form > *:nth-child(6) {
    animation-delay: 500ms;
}


@keyframes carequestion-show-focus-step {
    0% {background-position: -30% -20%}
    100% {background-position: -69% -100%}
}