@import '../../environment';
@import '../../shared/personal';
@import '../../shared/personal.archive';
@import '../../shared/personal.indemnities';

table.archive
{
    @include for-at-least-tablets
    {
        // needed to make `div` fill entire table cell.
        height: 1px;
    }

    td.amount
    {
        position: relative;

        height: 100%;

        font-weight: normal;
        white-space: normal;

        .value
        {
            white-space: nowrap;

            @include for-at-least-tablets
            {
                font-weight: bold;
            }
        }

        .status
        {
            @include extra-small-text;

            color: $color-text-normal;
        }

        @include for-at-least-tablets
        {
            width: 28.6%;

            > div
            {
                display: flex;
                flex-direction: column;

                height: 100%;

                .ie &
                {
                    // ie10/11 makes table cell too wide with flexbox inside
                    max-width: steps(13);
                }
            }

            .links
            {
                margin-top: auto;
            }
        }
    }

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

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

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

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

        margin-bottom: steps(2);

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

        button.reload
        {
            @include icon("reload", $color-link-normal);

            color: $color-link-normal;
        }
    }
}
