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

main
{
    h1
    {
        @include page-content;

        margin-bottom: steps(2);

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

            text-align: center;
        }
    }

    .content.search
    {
        .control.text input{
            border-top: 1px solid $color-border-normal;
            border-left: 1px solid $color-border-normal;
            border-right: 1px solid $color-border-normal;
        }

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

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

            .button
            {
                @include heavy-button;
            }
        }

        .hint
        {
            @include map-hint;
        }

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

            .field.filter
            {
                display: none;
            }

            .action
            {
                margin-top: steps(5);
            }
        }
    }

    .search-types
    {
        @include type-selector;
    }

    .service-types
    {
        @include separated-list;

        margin-top: steps(1.5);

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

    .field.id,
    .field.search
    {
        > .label
        {
            @include visually-hidden;
        }

        .control
        {
            @include for-at-least-normal-tablets
            {
                margin: auto;
            }
        }
    }

    .field.search
    {
        @include combobox;

        .control
        {
            width: 100%;
            max-width: steps(56);
        }

        ul.resultbox
        {
            @include for-at-least-normal-tablets
            {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    .card-number
    {
        @include alternative-text;

        margin-bottom: steps(2);

        .value
        {
            margin: 0 steps(0.5);

            font-weight: bold;
        }
    }
}

main .content.locations li .details,
.google-map .location-details .details
{
    .address
    {
        display: inline;
        margin-right: steps(0.5);
    }

    .phone
    {
        color: $color-link-normal;

        &::before
        {
            content: svg-image-data-url("phone", $color-link-normal);
        }
    }
}
