@import '../environment';
@import '../shared/application_form';
@import '../shared/policy_prices';
@import '../shared/payment';

p.note
{
    .asterisk
    {
        display: block;

        @include for-at-least-normal-tablets
        {
            display: inline;

            &:not(:last-child)
            {
                margin-right: steps(2);
            }
        }
    }
}

fieldset.prices
{
    .badge + .option
    {
        border-top: none;
    }

    .option
    {
        background-color: $color-background-lightest;
        padding-top: steps(3);

        @include for-at-least-normal-tablets
        {
            position: relative;

            padding-top: steps(7.5);
        }
    }

    .badge
    {
        @include baseline-box(14px, 20px, 0.5px, steps(0.5), steps(0.5));

        border-radius: 8px 8px 0 0;
        text-align: center;

        padding-left: steps(2);
        padding-right: steps(2);
        margin: auto;

        color: $color-link-normal;
        background: $color-brand-light;
        white-space: nowrap;

        position: relative;
        top: 5px;

        @include for-at-least-normal-tablets
        {
            position: absolute;
            top: steps(-3.4);
            left: 50%;

            transform: translate(-50%);

            width: calc(100% - #{2 * $gutter});
        }
    }

    .price
    {
        .name,
        .value
        {
            display: block;
        }

        .name
        {
            @include baseline-box(14px, steps(2), 0.6px);

            margin-top: steps(-0.5);
            margin-bottom: steps(1.5);

            color: $color-text-lighter;
        }

        .value
        {
            white-space: nowrap;

            @include for-desktops
            {
                margin-left: steps(-3);
                margin-right: steps(-3);
            }
        }

        &.extra
        {
            display: flex;
            justify-content: space-between;

            margin-top: steps(-1);

            .name
            {
                margin: 0;
            }

            .value
            {
                @include baseline-box(16px, steps(3), 0.5px);

                padding-left: steps(0.5);
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    .specs
    {
        margin-bottom: steps(2);

        .title
        {
            @include baseline-box(14px, steps(2), 0.6px);

            margin-bottom: steps(1);

            color: $color-text-lighter;
        }

        dt, dd
        {
            @include baseline-box(16px, steps(3), 0.5px);

            display: inline-block;

            color: $color-text-lighter;
            text-align: left;
            vertical-align: top;
        }

        dt
        {
            float: left;
            max-width: 100%;
            margin-right: steps(2);
        }

        dd
        {
            display: block;

            font-weight: bold;
            color: $color-text-darker;
            text-align: right;
        }
    }

    > ul
    {
        > li
        {
            @include one-third-column;
        }
    }
}

.container.small
{
    max-width: steps(90);

    @include for-at-least-normal-tablets
    {
        margin-right: auto;
        margin-left: auto;
    }
}

.insurance-risks
{
    padding-left: 0;
    padding-right: 0;

    .expandable
    {
        .insurance-risks__heading::after
        {
            content: svg-image-data-url('chevron-down', $color-link-normal);
            margin-right: steps(3);
            @include transition(transform);
        }

        &.expanded .insurance-risks__heading::after
        {
            transform: translateY(-25%) rotate(180deg);
        }
    }

    &__heading
    {
        background-color: $color-brand-light;
        height: steps(7);
        display: flex;
        align-items: center;
        justify-content: space-between;

        @include for-at-least(steps(90))
        {
            border-radius: 8px;
        }

        .field
        {
            padding-left: steps(1);
            margin-bottom: 0;
        }

        .svg
        {
            color: $color-text-darkest;

            svg
            {
                width: steps(5);
                height: steps(5);
            }
        }

        .chevron-down
        {
            margin-right: steps(3);
            color: $color-link-normal;
        }

        .lead
        {
            color: $color-text-darker;
            line-height: 30px;
            letter-spacing: 0.5px;
            font-size: 16px;
            font-weight: bold;
            @include sans-serif-font-family;
        }
    }

    .expandable-switch
    {
        text-decoration: none;
    }

    .expandable-content
    {
        display: none;
    }

    .risks
    {
        padding-top: 14px;
    }

    .risk
    {
        border-bottom: 1px solid $color-text-lightest;

        &:hover
        {
            background-color: $color-background-normal;
        }

        &__heading
        {
            display: flex;
            justify-content: space-between;

            &::after
            {
                content: svg-image-data-url('tick1', $color-checkmark-green);
                margin: auto steps(4.5) auto 0;
            }
        }

        &.not-applicable .risk__heading::after
        {
            content: '';
            display: inline-block;
            width: steps(1);
            height: steps(1);
            background-color: $color-text-lightest;
            border-radius: 50%;
            margin: auto 51px auto 0;
        }

        span
        {
            @include sans-serif-font-family;
            color: $color-text-normal;
            font-size: 16px;
            letter-spacing: 0.5px;
            line-height: 19px;
        }

        .title
        {
            padding: 16px 0 16px 20px;
        }

        .expandable-content
        {
            padding: 0 100px 16px 20px;
        }
    }

    .terms
    {
        margin-top: steps(4);
        padding: 0 steps(1);
    }

    .field .control.checkbox input + label::before
    {
        margin-right: 21px;
    }
}
.panel.form .field.with-note
{
    .control.checkbox
    {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        padding-top: 12px;

        .note
        {
            padding: steps(1) 0 steps(1) 29px;
            color: $color-background-lightest;
            @include sans-serif-font-family;
            font-size: 16px;
            letter-spacing: 0;
            line-height: steps(2);
        }
    }
}

main
{
    .form .field.usage-warning:not(.is-shown),
    .usage-warning:not(.is-shown)
    {
        display: none;
    }
}

.panel.warning
{
    padding-right: steps(1);
    padding-left: 0;

    @include for-at-least-normal-tablets
    {
        padding-right: steps(0);
    }

    margin-bottom: 0;
    background: unset;
    background-color: $color-brand-light;

    span
    {
        display: block;
        padding-left: steps(4.5);
        @include sans-serif-font-family;
        color: $color-text-normal;
        font-size: 16px;
        letter-spacing: 0.5px;
        line-height: 19px;
    }
}

.panel.form.secondary
{
    margin-top: 0;
}
