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

main
{
    .richtext + .vacancies
    {
        margin-top: steps(3.5);

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

    .vacancies
    {
        .heading
        {
            @include large-heading;

            margin-bottom: steps(2.5);

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

    .vacancy
    {
        .expandable-content
        {
            margin-top: 1px;
            padding: steps(2)-1px steps(2) steps(3);

            @include for-at-least-normal-tablets
            {
                padding-left: steps(3);
                padding-right: steps(3);
            }

            .description
            {
                h2, h3
                {
                    @include normal-text;

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

                    margin-top: steps(1);
                    margin-bottom: steps(0.5);

                    font-family: inherit;

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

            .workplace,
            .working-hours
            {
                position: relative;
                padding-left: 32px;
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: steps(1);

                &:before
                {
                    position: absolute;
                    left: 0;
                    top: 4px;

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

                .title,
                .description
                {
                    @include normal-text;

                    display: block;
                    margin-bottom: 0;
                }

                .title
                {
                    color: $color-text-darker;
                    font-weight: bold;

                    @include for-at-least-normal-tablets
                    {
                        display: inline-block;
                        margin-right: steps(0.5);
                    }
                }

                .description
                {
                    @include for-at-least-normal-tablets
                    {
                        display: inline-block;
                    }
                }
            }

            .workplace
            {
                margin-top: steps(2);

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

                &:before
                {
                    content: svg-image-data-url("marker", $fill: $color-brand-darker);
                }
            }

            .working-hours
            {
                &:before
                {
                    content: svg-image-data-url("clock", $fill: $color-brand-darker);
                }
            }

            .contacts
            {
                border-top: 1px solid $color-border-normal;
                padding-top: steps(2)-1px;
                margin-top: steps(3);

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

    .content.secondary > .actions
    {
        @include buttons;

        margin: steps(1) 0 steps(8);

        @include for-at-most-tablets
        {
            display: none;
        }

        .button
        {
            display: block;
        }
    }
}
