@import 'pagination';

%status
{
    @include small-text;

    // override `display` property set by `icon` mixin
    display: block !important;

    color: $color-brand-darker;

    &.processing
    {
        @include icon("clock", $color-brand-darker);
    }

    &.completed
    {
        @include icon("done", $color-brand-darker);
    }

    &.warning
    {
        @include icon("alert", $color-brand-darker);
    }
}

%module
{
    padding: steps(3);
    border: 1px solid $color-border-normal;
    margin-top: -1px;
    margin-bottom: steps(2) - 1px;

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

    header
    {
        padding: steps(2) steps(3);
        margin-left: steps(-3);
        margin-right: steps(-3);
        margin: steps(-3) steps(-3) steps(3);

        background: $color-background-normal;

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

        // empty module
        &:last-child
        {
            margin: steps(-3) - 1px;

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

        .heading
        {
            @include baseline-box(16px, steps(2.5), 0.5px);

            margin-bottom: steps(-0.5);

            font-weight: normal;

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

                flex-grow: 1;

                margin-bottom: 0;
            }
        }

        .links
        {
            @include list-links;

            margin-bottom: steps(-0.5);

            margin-left: auto;

            &:not(:first-child)
            {
                @include for-at-least-normal-tablets
                {
                    margin-left: steps(2);

                    white-space: nowrap;
                }
            }
        }
    }

    .table-box
    {
        @include for-phones
        {
            margin-top: steps(-3);
            margin-left: steps(-3);
            margin-right: steps(-3);
        }
    }

    table
    {
        border: 0;

        tr
        {
            border: 0;
        }

        td
        {
            color: $color-text-darker;
        }

        tr.separator
        {
            border: 0;

            td
            {
                height: steps(2);
                padding: 0;
            }
        }

        td.amount
        {
            white-space: nowrap;
        }

        td.links
        {
            @include baseline-paddings(16px, steps(3), steps(1), steps(1));

            background: $color-background-lighter;

            a.secondary
            {
                @include alternative-link;
            }

            @include for-at-least-tablets
            {
                a:not(:last-child)
                {
                    margin-right: steps(2.5);
                }
            }
        }

        .bill.overdue
        {
            tr
            {
                border-color: $color-alert;
            }

            tr.status
            {
                border-top-style: hidden;

                td
                {
                    padding-top: 0;

                    &::before
                    {
                        content: none;
                    }
                }

                p.text
                {
                    @extend %status;

                    @include baseline-box(14px, 20px, 0);

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

            td.links
            {
                color: $color-background-lightest;
                background: $color-alert;

                a
                {
                    color: inherit;
                }

                @include for-phones
                {
                    &,
                    a:not(:last-child)
                    {
                        border-color: currentColor;
                    }
                }
            }
        }

        @include for-phones
        {
            tbody:not(:last-child)
            {
                padding-bottom: steps(3);
                border-bottom: 1px solid $color-border-normal;
            }

            td.links::before,
            tr.separator
            {
                display: none;
            }

            td.links
            {
                padding: 0;
                border: 1px solid $color-border-normal;
                margin-left: steps(3);
                margin-right: steps(3);

                text-align: center;

                a
                {
                    @include baseline-paddings(16px, steps(3), steps(1), steps(1));

                    display: block;
                    padding-left: steps(2);
                    padding-right: steps(2);

                    &:not(:last-child)
                    {
                        border-bottom: 1px solid $color-border-normal;
                    }
                }
            }
        }

        @include for-at-least-tablets
        {
            tr
            {
                border: 1px solid $color-border-normal;
            }

            thead
            {
                tr
                {
                    border-color: transparent;
                    border-bottom: 0;
                }

                th
                {
                    @include uninverted;
                    @include baseline-paddings(16px, steps(3), 0, steps(1.5));

                    color: $color-text-darker;
                }
            }
        }
    }

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

        @include for-phones
        {
            padding: steps(3);
            border-top: 1px solid $color-border-normal;
            margin-left: steps(-3);
            margin-right: steps(-3);
            margin-bottom: steps(-3);

            background: $color-background-lighter;
        }
    }
}


main
{
    h1
    {
        @include normal-heading;

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

    .content
    {
        &.primary
        {
            @include for-desktops
            {
                order: 2;

                padding-left: 10%;
                padding-right: $gutter;
            }
        }

        &.secondary
        {
            @include for-desktops
            {
                order: 1;
            }
        }

    }

    .page-links
    {
        @include list-links;
    }

    .action .button.successful
    {
        @include button-icon("checkmark", $color-background-lightest, $center: true);

        background-color: $color-success;
    }

    @include for-at-least-normal-tablets
    {
        .js & form.settings:not(.changed) .action
        {
            display: none;
        }
    }
}

section.messages,
section.bills,
section.indemnities
{
    @extend %module;
}

.dialog
{
    dl.properties
    {
        .status
        {
            @extend %status;

            + .footnote
            {
                margin-top: steps(-2.5);
            }
        }

        .footnote
        {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}

.notice
{
    position: relative;

    padding: steps(3) steps(3) steps(2);
    border: 1px solid $color-text-lightest;
    margin-top: -1px;
    margin-bottom: steps(3) - 1px;

    @include for-at-least-normal-tablets
    {
        display: flex;
        flex-direction: column;
        justify-content: center;

        min-height: 122px;
        padding: steps(2) steps(4) steps(3);
        margin-bottom: steps(4) - 1px;
    }

    &::before
    {
        position: absolute;
        top: 0;
        left: 0;

        overflow: hidden;
        width: steps(6);
        height: steps(6);
        margin: steps(3) 0 0 steps(3);
    }

    @at-root %notice-with-icon
    {
        @include for-at-most-small-tablets
        {
            padding-top: steps(11);
        }

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

    > ul, 
    > ol
    {
        @include bullet-list;
    }

    .downloads
    {
        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(2);
        }

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


    &.warning
    {
        @extend %notice-with-icon;

        &::before
        {
            content: svg-image-data-url("exclamation", $color-text-lighter);
        }
    }

    &.danger
    {
        @extend %notice-with-icon;

        &::before
        {
            content: svg-image-data-url("exclamation", $color-brand-darker);
        }
    }

    &.success
    {
        @extend %notice-with-icon;

        &::before
        {
            content: svg-image-data-url("success", $color-success);
        }
    }
}
