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

main
{
    .field.attachments
    {
        @include dropzone;
    }

    .field.institution
    {
        @include horizontal-combobox;
    }

    .field.editable
    {
        html:not(.js) & .value,
        &.open .value,
        .js &:not(.open) .control,
        &:not(.open) .actions
        {
            display: none;
        }

        button.edit
        {
            margin-left: steps(1.5);

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

        button.cancel
        {
            color: $color-text-normal;

            &:active
            {
                color: $color-text-darker;
            }
        }
    }

    p.action
    {
        @include page-content;

        @include for-at-least-normal-tablets
        {
            text-align: center;
        }
    }

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

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

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

    fieldset.service
    {
        position: relative;

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

        @include for-at-least-normal-tablets
        {
            padding-top: steps(3);
            padding-bottom: steps(4);
            margin-left: steps(4);
            margin-right: steps(4);

            + fieldset.service
            {
                margin-top: steps(-2);
            }
        }

        .field.price
        {
            margin-bottom: 0;

            .control
            {
                width: steps(14);
            }
        }

        button.remove
        {
            @include remove-icon;

            position: absolute;
            top: 50%;
            right: steps(3);

            overflow: hidden;
            width: steps(4);
            height: steps(4);

            transform: translateY(-50%);

            &::before
            {
                margin: 0 0 steps(1) 0;
            }

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

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

                    background-color: $color-border-darker;
                }
            }
        }
    }

    .receipt
    {
        position: relative;

        padding-bottom: steps(6);
        margin-bottom: steps(2);

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

        &::after
        {
            content: "";

            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;

            border-bottom: steps(3) solid $color-background-lightest;

            @include for-at-most-small-tablets
            {
                left: -$gutter;
                right: -$gutter;
            }
        }

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

            &::after
            {
                content: none;
            }
        }

        > button.remove
        {
            @include remove-icon;

            position: absolute;
            top: steps(1);
            right: steps(3.5);

            overflow: hidden;
            width: steps(4);
            height: steps(4);

            &::before
            {
                margin: 0 0 steps(1) 0;
            }

            @include for-at-most-small-tablets
            {
                top: steps(-3.5);
                right: 0;

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

                    background-color: $color-border-darker;
                }
            }
        }
    }

    .summary
    {
        margin-bottom: steps(3) - 1px;

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

        .field
        {
            @include horizontal-field;
            @include horizontal-summary-field;
        }

        .action:last-child
        {
            margin-bottom: steps(0.5);
        }
    }
}

.dialog.institution
{
    .caption
    {
        @include alternative-text;

        font-weight: bold;
    }

    ul.types
    {
        margin-bottom: steps(3.5);
    }
}
