/* ==========================================================================
   05_NAVIGATION: INTERNAL
   --------------------------------------------------------------------------
   * README

   * BREADCRUMBS
   * TABS
   * PAGINATION
   * SORT
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Internal Navigation default styles.
 * That means they apply to different HTML components you can use to browse
 * the site internally, and therefore, they apply only to the pages that display
 * one or more of these components.

 * At the moment we have not had to deal with any exception to these Internal
 * Navigation default styles, but if it becomes necessary, let's talk about it
 * and find a way to incorporate the given exception to these Internal Navigation
 * default styles, as they should be able to cover any possible use without
 * exceptions.
 */

/* BREADCRUMBS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used as the first element in the content of a given page, before any
   .cols, .section or .aside elements.
   --------------------------------------------------------------------------

    {% block section %}
        <div class="breadcrumbs">
            <a class="breadcrumbs__item" href="X">X</a>

            &gt; <a class="breadcrumbs__item" href="X">X</a>

            &gt; <span>X</span>
        </div>

        ...

    {% endblock %}

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.breadcrumbs {
  padding: 15px 0 0 25px;
}
@media all and (max-width: 768px) {
  .breadcrumbs {
    display: none;
  }
}

/* Appearance
   -------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 15px;
}

.breadcrumbs__item {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    color: #FFFFFF; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.breadcrumbs__item:hover {
    border-color: inherit;
}
.breadcrumbs .separator {
  margin: 0 8px;
}

/* TABS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used as an alternate content for the .section__header element
   in a given page, as semantically the .tabs__item--active works as a
   .section__header__text__title element.
   --------------------------------------------------------------------------

    <div class="section__header">
        <div class="tabs clearfix">
            <h2 class="tabs__item tabs__item--active">X</h2>
            <a class="tabs__item" href="X">X</a>
            <a class="tabs__item" href="X">X</a>
            <span class="tabs__extra">
                <a class="link" href="X">X</a>
                <a class="link" href="X">X</a>
            </span>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.tabs__item {
    float: left;
    margin-bottom: -1px;
    padding: 18px 20px;
}

.tabs__item+.tabs__item {
    margin-left: 8px;
}

.tabs__extra {
    float: right;
    margin-bottom: -1px;
    padding: 18px 20px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.tabs {
    display: block !important;
}

/* Appearance
   -------------------------------------------------------------------------- */
.tabs {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
}

.tabs__item {
    border-radius: 4px 4px 0 0;
    border-width: 1px;
    border-style: solid;
    border-left-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    border-top-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    border-right-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    font-size: 16px;
    line-height: 16px;
}

.tabs__item:not(.tabs__item--active) {
    border-bottom-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    background-color: #FAFAFA;
    color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
    cursor: pointer;
}

.tabs__item--active {
    border-bottom-color: #FFFFFF;
    background-color: #FFFFFF;
    cursor: default;
}

.tabs__extra {
    font-size: 14px;
    color: #565656;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .tabs__item {
        display: block;
        float: none;
        margin-bottom: 0;
        width: 100%;
        padding: 16px 0;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .tabs__item:not(.tabs__item--active) {
        display: none;
    }

    .tabs__extra {
        display: none;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .tabs__item {
        border: none;
        font-size: 20px;
    }

}

/* PAGINATION
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   To be used on top or bottom of a table/list of results. The original
   code in paginationX.tpt includes conditionals and variables, the following is
   an example of the final rendered output.
   --------------------------------------------------------------------------

    <div class="section__content">
        <div class="pagination pagination--top clearfix">
            <span class="pagination__legend">X-X of X results</span>
            <a class="pagination__item paginationLink currentPageLink" href="X">X</a>
            <a class="pagination__item paginationLink" href="X">X</a>
        </div>

        ...

        <div class="pagination pagination--bottom clearfix">
            <span class="pagination__legend">X-X of X results</span>
            <a class="pagination__item paginationLink currentPageLink" href="X">X</a>
            <a class="pagination__item paginationLink" href="X">X</a>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.pagination--top {
    margin-bottom: 30px;
}

.pagination--bottom {
    margin-top: 30px;
}

.pagination__legend,
.pagination__item {
    margin-bottom: 6px;
}

.pagination__legend {
    float: left;
}

.pagination__item {
    display: inline-block;
    margin-left: 0px;
    padding: 2px 6px 2px 13px;
    margin-right: 6px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.pagination {
    text-align: right;
}

.pagination__legend,
.pagination__item {
    vertical-align: middle;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.pagination {
    font-size: 14px;
}

.pagination__item {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCCCCC;
    text-decoration: none;
    color: #00645D;
}

.pagination__item:hover,
.pagination__item:active,
.pagination__item:visited {
    text-decoration: none;
    color: #00645D;
}

.currentPageLink,
.currentPageLink:hover,
.currentPageLink:active,
.currentPageLink:visited {
    text-decoration: none;
    color: #565656;
    border-left-width: 0px;
}

/* SORT
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.sort {
    margin-bottom: 20px;
}

.sort__legend {
    margin-right: 20px;
}

a.sort__item + a.sort__item {
    margin-left: 20px;
}

.sort__item__icon {
    max-width: 10px;
}

th .sort__item__icon {
    margin-left: -5px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.sort__legend,
.sort__item {
    vertical-align: middle;
    white-space: nowrap;
}

/* Appearance
   -------------------------------------------------------------------------- */
.sort {
    font-size: 14px;
}

.sort__item {
    outline: 0;
    cursor: pointer;
}

.sort__item .fa-sort {
    color: #999999;
}

.sort__item .fa-sort-asc,
.sort__item .fa-sort-desc {
    color: transparent;
}

.sort__item--active {
    border-bottom-color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.sort__item:hover .fa-sort-asc,
.sort__item:focus .fa-sort-asc,
.sort__item:active .fa-sort-asc,
.sort__item--ASC .fa-sort-asc {
    color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.sort__item--ASC:hover .fa-sort-desc,
.sort__item--ASC:focus .fa-sort-desc,
.sort__item--ASC:active .fa-sort-desc,
.sort__item--DESC .fa-sort-desc {
    color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

/* Reduce filter size at smallest viewports */
@media (max-width: 768px) {
    .sort .sort__legend {
        display: none;
    }
    .sort .sort__item {
        float: left;
        margin-right: 20px;
    }
}

@media (min-width: 769px) {
    a.sort__item + a.sort__item {
        margin-left: 20px;
    }
}