.panel
{
    padding: steps(2) steps(3) steps(3);
    margin-top: steps(3);
    margin-bottom: steps(3);

    background-color: $color-background-dark;

    &.no-columns
    {
        background: $color-background-dark;
    }

    @at-root aside#{&},
    &.narrow
    {
        background: $color-background-normal;
    }



    &:last-child
    {
        margin-bottom: 0;
    }

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

// full width panel containing horizontal fields
// primarily used in application forms
.panel.form
{
    padding-left: $gutter;
    padding-right: $gutter;

    @include for-at-least-normal-tablets
    {
        padding-left: 0;
        padding-right: 0;

        .field
        {
            @include horizontal-field;
            @include page-container;

            .label
            {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                height: steps(5);

                label
                {
                    // wrap text in flex container in ie11
                    max-width: 100%;
                }
            }
        }

        > .field:first-child,
        .container:first-child > .field:first-child
        {
            margin-top: steps(1);

            &.with-joint
            {
                margin-top: 0;
            }
        }
    }

    &.review
    {
        .field
        {
            @include for-at-least-normal-tablets
            {
                @include horizontal-summary-field;

                &:first-child
                {
                    margin-top: steps(0.5);
                }
            }

            &.attachments
            {
                display: block;
                padding: 0;
                margin-top: steps(1);

                background: none;

                @include for-at-most-small-tablets
                {
                    margin-left: 0;
                    margin-right: 0;
                }

                @include for-at-least-normal-tablets
                {
                    @include content-padding;
                }

                &:not(:first-child)
                {
                    margin-top: steps(3.5);
                }

                .values
                {
                    margin-bottom: 0;

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

                .value
                {
                    padding: steps(1);

                    @include for-at-least-normal-tablets
                    {
                        width: steps(26);
                    }
                }
            }
        }
    }
}
