/* ==========================================================================
    LAYOUTS
    -------------------------------------------------------------------------
    XXX

    ELEMENTS
    -------------------------------------------------------------------------
    Indicators
      : Count (New)
      : Pills (New)

    COMPONENTS
    -------------------------------------------------------------------------
    Cards
      : Articles as cards (Override/complement)
    Navigation
      : Switcher
        : As icons (Inverting clickable colors - commented and ready to use)
    Tables
      : Default (Override/complement)

    WIDGETS
    -------------------------------------------------------------------------
    XXX

    MODULES
    -------------------------------------------------------------------------
    Banner
      : Extra (New)
    Slider (New)

    PAGETYPES
    -------------------------------------------------------------------------
    Dashboard
      : Section (Override/complement)
    Search jobs
      : Main (Override/complement)
      : Wrapper (Override/complement)
      : Section (Override/complement)
      : Cards
        : Result (Override/complement)

    UTILITIES
    -------------------------------------------------------------------------
    XXX
========================================================================== */

/*
    LAYOUTS/XXX
*/

/*
    ELEMENTS/Indicators: Count (New)
*/

.count {
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    min-width: 3rem;
    height: 3rem;
    background-color: var(--color--brand);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    color: var(--color--white);
}

/*
    ELEMENTS/Indicators: Pills (New)
*/

.pill {
    display: inline;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    font-size: 1.2rem;
    padding: var(--spacer--xs) var(--spacer--s);
    color: var(--color--white);
    background-color: var(--color--clickeable);
    font-weight: 400;
    vertical-align: middle;
}

/*
    COMPONENTS/Cards: Articles as cards (Override/complement)
*/

.article--card .button--secondary,
.article--card .button--tertiary,
.article--card .button--share {
    --buttons--font--size: initial;
}

.article--card .article__footer {
    padding-top: calc(var(--card--padding--inners));
    padding-bottom: calc(var(--card--padding--inners));
}

.article--card .article__footer > * + * {
    margin-left: var(--card--padding--outers);
}

.article--card--metric {
    padding: var(--spacer--l);
    text-align: center;
}

/*
    COMPONENTS/Cards: Articles as cards (Within LAYOUTS/Grid: Sidebars)
*/

.grid__item--aside-right .article--card--metric {
    display: flex;
    height: 100%;
    justify-content: center;
}

/*
    COMPONENTS/Navigation: Switcher: As icons (Inverting clickable colors - commented and ready to use)
*/

/*
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]),
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):link,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):visited {
    color: inherit;
}

.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):hover,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):focus,
.switcher--as-icons [class*="__option"]:not([class*="__option--active"]):active {
    color: var(--color--clickeable);
}

.switcher--as-icons [class*="__option--active"],
.switcher--as-icons [class*="__option--active"]:link,
.switcher--as-icons [class*="__option--active"]:visited,
.switcher--as-icons [class*="__option--active"]:hover,
.switcher--as-icons [class*="__option--active"]:focus,
.switcher--as-icons [class*="__option--active"]:active {
    color: var(--color--clickeable);
}

+TBD+
*/

/*
    COMPONENTS/Tables: Default (Override/complement)
*/

.table--default tbody tr td:nth-last-child(1) {
    display: flex;
    align-items: center;
    gap: var(--spacer--s);
    width: unset;
    white-space: nowrap;
}

/*
    WIDGETS/XXX
*/
/*
    MODULES/Banner: Extra (New)
*/
.banner {
    color: var(--color--white);
}
/*
    MODULES/Banner: Extra (New)
*/

.banner--extra {
    --color--background: var(--color--brand--sub-1);
}

.banner--extra .banner__wrapper {
    --banner--padding--top: var(--spacer--xxxl);
    --banner--padding--bottom: var(--spacer--xxxl);

    justify-content: center;
    gap: var(--spacer--m);
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .banner--extra .banner__wrapper {
        flex-direction: column;
    }

    .banner--extra .banner__button {
        width: 100%;
    }

}

/*
    MODULES/Slider (New)
*/

:root {
    --swiper__slide--gap: var(--grid--columns--gap);
    --swiper-navigation-size: 4.4rem;
}

.slider {
    position: relative;
}

.swiper-container {
    position: static;
    width: calc(100% - (var(--swiper__slide--gap)*2) - var(--swiper-navigation-size));
}

.swiper-slide {
    height: auto;
}

.swiper-slide .article--card {
    box-sizing: border-box;
    height: 100%;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    --swiper-theme-color: var(--color--black);
}

.swiper-button-next,
.swiper-button-prev {
    z-index: 8;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: calc(var(--swiper-navigation-size)/2);
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 0;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 0;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .swiper-container {
        width: calc(100% - (var(--swiper__slide--gap)*3) - var(--swiper-navigation-size));
    }

}

/*
    PAGETYPES/Dashboard: Section (Override/complement)
*/

.section--dashboard .section__header__count {
    margin-right: var(--spacer--s);
}

.section--dashboard .section__header__text {
    display: flex;
    align-items: baseline;
    gap: var(--spacer--s);
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .section--dashboard .list-controls {
        display: none;
    }

}

/*
    PAGETYPES/Search jobs: Main (Override/complement)
*/

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .body--search-jobs .main {
        --color--background: var(--color--grey--lighter); /* templatebuilder .main - to be deleted on basePortalCloner */
        --main--padding--bottom: 0;
    }

}

/*
    PAGETYPES/Search jobs: Wrapper (Override/complement)
*/

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .body--search-jobs .main__wrapper {
        --main--padding--bottom: 0;
    }

}

/*
    PAGETYPES/Search jobs: Section (Override/complement)
*/

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .section--search-jobs .section__content {
        border-radius: var(--boxes--border--radius) var(--boxes--border--radius) 0 0;
        background-color: var(--color--white);
        padding: var(--spacer--xl) var(--spacer--xxxl);
    }

}

/*
    PAGETYPES/Search jobs: Cards: Result (Override/complement)
*/

.section--search-jobs .article--result {
    --result--border--radius: 0;
    --result--padding--outers--h: 0;
}

.section--search-jobs .article--result + .article--result {
    margin-top: 0;
}

.section--search-jobs .article--result + .article--result:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top-width: 0.1rem;
    border-top-style: solid;
    border-top-color: var(--dividers--border--color);
}

/* PAGETYPES: Search jobs: Results without toggle (Override/complement)
   -------------------------------------------------------------------------- */

/* Media query to target only desktop */
@media all and (min-width:750px) {
    .article--result.article--non-toggle .article__content {
        max-height: unset;
        visibility: visible;
        margin-top: var(--result--padding--inners--v);
    }

    .article--non-toggle .article__header__actions {
        display: none;
    }
 }

/* UTILITIES: XXX
   -------------------------------------------------------------------------- */
.title--secondary {
    color: var(--color--grey--darkest);
}