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

main
{
    .panel
    {
        position: relative;

        @include for-at-most-small-tablets
        {
            padding-left: steps(2);
            padding-right: steps(2);
            margin-left: steps(-2);
            margin-right: steps(-2);

            &:last-child
            {
                margin-bottom: steps(-4) - 1px;
            }
        }

        .actions
        {
            @include button-set;
        }
    }

    .panel.review
    {
        > .field,
        fieldset > .field
        {
            @include summary-field;
        }

        ol.survey
        {
            > li
            {
                @include small-text;

                &:not(:last-child)
                {
                    margin-bottom: steps(1.5);
                }

                &::before
                {
                    top: 2.8px;

                    @include for-at-least-normal-tablets
                    {
                        top: -1.5px;
                    }
                }
            }

            .field .value
            {
                @include normal-text;

                padding-top: 0;
                padding-bottom: 0;

                @include for-at-least-normal-tablets
                {
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }

    .hint
    {
        @include hint;
    }

    legend
    {
        @include fieldset-name;
    }

    ol.survey
    {
        @include bullet-list;
    }

    // specificity override after `bullet-list` mixin
    ol.survey:not(ul)
    {
        > li
        {
            &:not(:last-child)
            {
                margin-bottom: steps(2);
            }

            &[value]::before
            {
                content: attr(value) ".";
            }

            ol
            {
                margin-top: steps(2);

                &:first-child
                {
                    margin-top: 0;

                    li:first-child
                    {
                        padding-top: 0;
                    }
                }
            }

            li
            {
                padding-left: 0;

                &::before
                {
                    position: static;

                    float: left;
                    margin-right: steps(0.5);

                    font: inherit;
                    font-weight: bold;
                    color: inherit;
                }

                &[data-parent-value][value]::before
                {
                    content: attr(data-parent-value) "." attr(value) ".";
                }
            }

            p
            {
                margin-bottom: steps(2);

                font-size: inherit;
                line-height: inherit;

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

        .field
        {
            .label
            {
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: steps(2);

                font: inherit;
                color: $color-text-normal;
            }

            .control.textarea textarea
            {
                min-height: steps(8);
            }


            &.switch
            {
                margin-bottom: 0;
            }
        }

        .field.weight,
        .field.length,
        .field.dioptres
        {
            @include for-at-least-normal-tablets
            {
                display: inline-block;
                margin-right: steps(2);
                margin-bottom: 0;
            }

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

                margin-bottom: 0;

                font-weight: bold;
                color: $color-text-darker;
            }

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

        .field.cigarettes
        {
            .control
            {
                width: steps(11);
            }
        }
    }

    [data-switch-relation]
    {
        margin-top: steps(3);

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

    @include for-at-least-tablets
    {
        .field.doctor .control
        {
            width: steps(42);
        }
    }

    @include for-at-least-normal-tablets
    {
        .field.last-name,
        .field.email,
        .field.occupation
        {
            .control
            {
                width: steps(32);
            }
        }
    }
}
