@import '../../environment';

@import '../../shared/personal';
@import '../../shared/personal.payment';
@import '../../shared/personal.dialogs';

aside.health-insurance
{
    padding: steps(2) steps(3) steps(3);
    border: 1px solid $color-border-normal;
    margin-top: -1px;
    margin-bottom: steps(3) - 1px;

    @include for-at-least-normal-tablets
    {
        padding: steps(3) steps(4) steps(4);
        margin-bottom: steps(5) - 1px;
    }

    .heading
    {
        @include small-heading;

        @include for-at-least-normal-tablets
        {
            margin-bottom: 0;
        }
    }

    .text
    {
        @include alternative-text;
    }

    .action
    {
        @include button-set;
    }
}

main
{
    .products
    {
        > li
        {
            position: relative;

            padding: 30px 30px 0;
            border: 1px solid $color-text-lightest;
            margin-bottom: 20px;

            @include for-at-least-normal-tablets
            {
                &:last-child
                {
                    margin-bottom: 30px;
                }

                > p
                {
                    padding: 0;
                    margin-left: steps(9);
                }
            }
        }

        .invalid
        {
            padding-bottom: steps(2);

            @include for-at-least-normal-tablets
            {
                min-height: 122px;
                padding-bottom: steps(3);
            }

            .svg.exclamation
            {
                color: $color-text-lighter;
            }
        }

        .svg.product
        {
            display: block;
            margin-bottom: steps(2);

            color: $color-brand-darker;

            @include for-at-least-normal-tablets
            {
                float: left;
            }
        }

        .title
        {
            margin-bottom: steps(1);

            font-weight: bold;
            color: $color-text-darker;

            .extra
            {
                color: $color-text-lighter;
            }

            @include for-at-least-normal-tablets
            {
                margin-bottom: 0;
            }
        }

        .info
        {
            @include small-text;
        }

        .links
        {
            background-color: $color-background-lighter;
            margin: 0 steps(-3);

            @include for-at-least-normal-tablets
            {
                clear: both;

                display: flex;
                flex-wrap: wrap;

                border-top: 1px solid $color-text-lightest;
                padding: steps(0.5) steps(1.5);
            }

            li
            {
                border-top: 1px solid $color-text-lightest;

                @include for-at-least-normal-tablets
                {
                    border: none;
                    margin: steps(0.5) steps(1.5);
                }
            }

            a
            {
                @include baseline-box(16px, steps(3), 0.5px, steps(1), steps(1));
                @include alternative-link;

                text-decoration: none;
                display: block;
                padding-left: steps(3);
                padding-right: steps(3);

                @include for-at-least-normal-tablets
                {
                    @include baseline-paddings(16px, steps(3));

                    padding-left: 0;
                    padding-right: 0;
                }
            }
        }
    }
}

.dialog.personal-data
{
    @include for-at-least-tablets
    {
        th.condition
        {
            width: 35%;
        }

        th.percentage,
        td.percentage
        {
            text-align: right;
        }
    }
}

.dialog.extra-insurance
{
    @include for-at-least-tablets
    {
        table
        {
            table-layout: fixed;
        }

        th + th,
        td + td
        {
            padding-left: steps(2) - 2px;
        }

        th.type
        {
            width: 23.5%;
        }

        th.amount
        {
            width: 22.5%;
        }

        th.bonus
        {
            width: 15%;
        }

        th.start
        {
            width: 17%;
        }

        th.end
        {
            width: 22%;
        }

        td
        {
            @include baseline-box(14px, steps(2.5), 0.5px, steps(2), steps(2));

            &.type
            {
                word-wrap: break-word;
            }
        }
    }
}

.dialog.changes
{
    .field.subject .control
    {
        width: auto;
    }

    .field.message .description
    {
        @include extra-small-text;

        margin-top: steps(1);

        color: $color-text-lighter;
        text-align: right;
    }

    .field.attachment .label
    {
        font-weight: normal;
        color: $color-text-normal;
    }

    .action .button
    {
        @include wide-button;
    }
}

.dialog.funds
{
    .chart
    {
        @include dialog-content-spacing;
    }

    .action
    {
        margin-top: steps(3);

        text-align: center;
    }
}

.dialog.fund-edit
{
    .fund
    {
        margin-bottom: steps(3);

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

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

                margin-bottom: steps(1);
            }
        }

        .field.percentage .control
        {
            width: steps(11);
        }

        .tools
        {
            margin-bottom: steps(-1);
        }

        .remove
        {
            @include remove-icon;

            html:not(.js) &
            {
                display: none;
            }
        }

        @include for-at-least-normal-tablets
        {
            display: flex;
            margin-bottom: 0;

            .field
            {
                flex: none;

                margin-right: steps(2);

                .control
                {
                    width: auto;
                }
            }

            .field.name
            {
                width: steps(38);
            }

            .field.percentage
            {
                width: steps(11);
            }

            .tools
            {
                width: steps(3);
                margin-bottom: 0;
            }

            .remove
            {
                &::before
                {
                    margin: 0;
                }

                .text
                {
                    @include visually-hidden;
                }
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        .fund + .fund .label
        {
            @include visually-hidden;
        }
    }

    .funds
    {
        > .tools
        {
            @include buttons;

            margin-bottom: steps(4);
        }

        > .total
        {
            @include alternative-text;

            padding: steps(2) steps(2.5);
            margin-bottom: steps(3);

            color: $color-text-darker;
            background: $color-background-lighter;

            .warning
            {
                display: block;
                margin-bottom: steps(1);

                color: $color-alert;
                font-weight: normal;
            }

            .name,
            .value
            {
                display: inline-block;
            }

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

            .value
            {
                padding-left: steps(1);

                white-space: nowrap;
            }

            @include for-at-least-normal-tablets
            {
                display: flex;
                align-items: center;

                .warning
                {
                    width: 55%;
                    margin-bottom: 0;
                }

                .name
                {
                    margin-left: auto;
                    padding-right: steps(1.5);

                    text-align: right;
                }

                .value
                {
                    width: 27.34%;
                    padding-left: steps(2.5);
                }
            }
        }
    }

    .action
    {
        @include for-at-least-normal-tablets
        {
            margin-top: steps(5);

            text-align: center;
        }
    }
}

.dialog.fund-success
{
    @include alert-dialog("success", $color-success);
}

.dialog.reports
{
    fieldset.period
    {
        padding-bottom: steps(3);
        border-bottom: 1px solid $color-border-normal;

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

        legend
        {
            @include normal-text;

            font-weight: bold;
        }
    }

    .field.date-range
    {
        &:last-child
        {
            margin-bottom: 0;
        }

        @include for-at-least-normal-tablets
        {
            display: flex;
            flex-wrap: wrap;
        }

        .field
        {
            display: flex;

            @include for-at-least-normal-tablets
            {
                margin-bottom: 0;

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

            .label
            {
                align-self: center;

                min-width: 43px;
                padding: 0;
                margin-right: steps(2) - 3px;

                @include for-at-least-normal-tablets
                {
                    min-width: 0;
                }
            }

            .control.date
            {
                @include for-at-least-normal-tablets
                {
                    width: steps(17.5);
                }
            }
        }

        .error
        {
            flex: none;
            width: 100%;

            @include for-at-most-small-tablets
            {
                margin-top: steps(-2);
            }
        }
    }

    .downloads
    {
        margin-top: steps(3);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(5);
        }
    }
}
