@import "../variables";

.vacancy {
    --vacancy-grid-columns: 1fr 1fr;
    --vacancy-gap: 1rem 2rem;
    --vacancy-item-min-height: 0;
    --vacancy-padding: 1.4rem 0;
    --vacancy-text-align: left;

    @include breakpoint-up('lg') {
        --vacancy-grid-columns: 1fr 17rem 14rem;
        --vacancy-gap: 0 5rem;
        --vacancy-item-min-height: 7.5rem;
        //--vacancy-padding: 2.5rem 0;
        --vacancy-text-align: right;
        --vacancy-padding: 1rem 0;
    }

    &__row {
        display: grid;
        grid-template-columns: var(--vacancy-grid-columns);
        gap: var(--vacancy-gap);
        align-items: center;
        min-height: var(--vacancy-item-min-height);
        padding: var(--vacancy-padding);

        &:not(:first-child) {
            border-top: 1px solid var(--color-line);
        }

        &.as-heading {
            min-height: 0;
            padding: 1rem 0;
            font-size: var(--typo-caption);
            font-weight: 400;

            @include breakpoint-down('lg') {
                & > :not(:first-child) {
                    display: none;
                }
            }
        }
    }

    :not(.as-heading) > &__job {
        color: var(--text-color, var(--color-text-primary));
        font-size: var(--typo-subtitle);
        font-weight: 600;

        @include breakpoint-down('lg') {
            grid-column-end: span 2;
        }
    }

    &__job {
        a {
            color: var(--color-link);
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 0.5;
            }
        }

        .job-locations {
            font-size: 12px;
            line-height: 14px;
            display: block;
            color: map_get($pallete, text-primary);
        }
    }

    &__category,
    &__commitment {
        text-align: var(--vacancy-text-align);

        a {
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 0.5;
            }
        }

        @include breakpoint-down('lg') {
            align-self: start;
            font-size: 1.4rem;
            grid-column-end: span 2;
        }
    }

    // if there is no location column
    &__category {
        .as-heading &:last-child,
        &:last-child {
            grid-column-end: span 2;
        }
    }

    &--new {
        .vacancy {

            &__row {
                --vacancy-grid-columns: 1fr 1fr;
            }
        }
    }
}