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

main
{
    .data-types
    {
        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(-3);
        }

        ul
        {
            @include tab-list;
        }
    }

    .data
    {
        .js &
        {
            .heading,
            &:not(.active)
            {
                display: none;
            }
        }

        .heading
        {
            @include small-heading;
        }
    }

    .panel
    {
        position: relative;
        margin-bottom: 0;

        @include for-at-most-small-tablets
        {
            padding-left: steps(2);
            padding-right: steps(2);
            margin-left: steps(-2);
            margin-right: steps(-2);
            margin-bottom: steps(-4) - 1px;
        }
    }

    legend
    {
        @include fieldset-name;
    }

    .field.house-number,
    .field.flat-number
    {
        display: inline-block;
        margin-right: steps(3.5);

        .control
        {
            width: steps(9);

            input
            {
                text-align: center;
            }
        }
    }

    .field.priority
    {
        max-width: none;
        padding-top: steps(3.5);
        padding-bottom: steps(1);
        border-top: 1px solid $color-border-normal;
        margin-top: steps(4);

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

        .control
        {
            @include for-at-least-normal-tablets
            {
                max-width: 64%;
            }
        }
    }

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

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

        .field
        {
            max-width: 64%;
        }

        .field.postcode
        {
            .control
            {
                width: steps(21.5);
            }
        }

        .action .button
        {
            position: absolute;
            right: steps(4);
            bottom: steps(4);

            &.sticky
            {
                position: fixed;
            }
        }
    }

    // make sure sticky submit button do not overlap with form controls
    @include for-at-least(steps(113))
    {
        .field.last-name,
        .field.company,
        .field.business,
        .field.email,
        .field.account-number,
        .field.street-name
        {
            .control
            {
                width: steps(32);
            }
        }
    }
}
