// Title of page when included in a facet list.
@mixin facet-title {
    margin-top: 0;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    line-height: 1.3;
}

.facet-list-wrapper {
    padding: 0;
    border: 1px #ccc solid;

    &.facet-list-wrapper--facet-group {
        padding: 0;
        margin-bottom: 10px;
    }

    &:empty {
        padding: 0;
        border: none;
    }
}

.box.facets {
    border-radius: 3px;
    overflow: hidden;

    .hiddenscroll & {
        padding-right: 0;
    }

    .horizontal {
        display: block;
        justify-content: space-between;

        @media screen and (min-width: $screen-sm-min) {
            display: flex;
            flex-wrap: wrap;
        }

        @media screen and (min-width: $screen-md-min) {
            flex-wrap: nowrap;
        }

        .facet {
            display: block;
            border-bottom: 0;

            @media screen and (min-width: $screen-sm-min) {
                min-width: 150px;
                flex: 0 0 19.5%;
                align-self: flex-start;
            }

            @media screen and (min-width: $screen-md-min) {
                min-width: auto;
            }
        }
    }

    &.summary-facets,
    &.matrix-facets {
        padding: 0;
        border: none;
        border-radius: 0;
    }

    h1 {
        @include facet-title;
    }
}

.sm-no-padding {
    padding-left: 0;
    padding-right: 0;
}

.search-header-control {
    position: relative;
    padding-bottom: 10px;
}

.clear-filters-control {
    position: relative;
    height: 1.1rem;
    margin-top: 5px;

    > div {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0.9rem;
    }
}

.facets h5, .facets legend {
    margin: 2px 0 0;
    font-weight: 600;
    text-align: left;
}

// Note: "will-change" under .term-list is to fix a Chrome slow-scrolling issue when scrollable
// facets exist.
// https://stackoverflow.com/questions/24741502/can-i-do-anything-about-repaints-on-scroll-warning-in-chrome-for-overflowscr/#answer-41026886

.facet {
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 10px 15px;
    word-break: break-word;
    border-bottom: 0.5px solid #f0f0f0;

    &:last-child {
        border-bottom: none;
    }

    .facet-terms {
        display: flex;
        position: relative;

        ul {
            margin: 0;
            padding: 3px 0;
            max-height: 95px;
            flex: 1 1 auto;
            overflow-y: scroll;
        }

        @at-root #{&}--typeahead {
            ul {
                max-height: 200px;
            }
        }
    }

    @at-root #{&}__multiselect {
        a {
            margin: 2px;
            font-size: 0.9rem;
            padding: 1px 5px;
            display: block;
            border-radius: 3px;
            border: 1px solid #bfbfbf;
            background-color: rgb(239, 239, 239);
            color: #000;

            &.selected {
                color: white;
                background-color: #4183c4;
                border: 1px solid #4183c4;
            }

            &.anyall {
                margin-top: 7px;
                font-weight: 600;
                background-color: #cecece;
                border: 1px solid #7d7d7d;

                &.selected {
                    background-color: #0a447d;
                }
            }
        }
    }

    @at-root #{&}-expander {
        display: flex;
        width: 100%;
        border: none;
        background-color: transparent;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        line-height: 1;
    }

    .facet-chevron {
        flex: 0 0 16px;
        width: 16px;
        height: 10px;

        .svg-icon {
            fill: #000;
        }
    }

    .facet-open {
        display: inline;
    }

    .facet-close {
        display: none;
    }

    &.hide {
        display: none;
    }
}

.facet-content {
    padding: 0;
    overflow: hidden;
}

// Radio button facet styles.
fieldset.facet {
    border-top: none;
    border-right: none;
    border-left: none;

    legend {
        padding: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .facet__radio {
        display: flex;
        padding: 0 10px;

        input[type="radio"] {
            flex: 0 0 13px;
            cursor: pointer;
        }

        label {
            flex: 1 1 auto;
            display: flex;
            padding-left: 5px;
            line-height: 1.4;
            justify-content: space-between;
            cursor: pointer;
        }

        @at-root #{&}-label {
            flex: 0 0 auto;
        }

        @at-root #{&}-count {
            flex: 0 0 auto;
            padding-right: 27px;
        }
    }
}

.facet-list-disabled {
    background-color: ghostwhite;
    opacity: 0.2;
    pointer-events: none;
    z-index: 9999;
}

.facet-list {
    margin: 0;
}

.facet-list {
    a.selected, a.negated-selected {
        color: #fff;
        text-decoration: none;
        font-weight: normal;
    }
}

.facet-term {
    display: flex;
    position: relative;
    align-items: center;
    margin: 1px 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    z-index: 0;

    // Space for the vanishing scroll bar.
    .hiddenscroll & {
        padding-right: 12px;
    }

    // For file gallery facets.
    &.selected {
        background-color: #4183c4;

        .facet-term__item {
            color: white;
        }
    }

    // For file gallery facets.
    .facet & {
        border-radius: 3px;
    }

    // Optional icon in status facets.
    @at-root #{&}__status {
        margin-right: 5px;
        align-items: center;

        @at-root #{&}-wrapper {
            flex: 0 1 auto;
            display: flex;
            align-items: center;
            margin: -2px 0;
        }

        @at-root #{&}-label {
            flex: 0 1 auto;
        }
    }

    // Clickable part of the facet term not including negated-trigger.
    @at-root #{&}__item {
        position: relative;
        display: flex;
        padding: 2px;
        border-radius: 3px;
        justify-content: space-between;
        align-items: center;
        flex: 1 1 auto;
        align-self: stretch;
        text-align: left;
        color: #000;
        text-decoration: none;

        &:hover, &:focus {
            text-decoration: none;
        }

        @at-root #{&}--selected {
            background-color: #4183c4;
            color: white;
        }

        @at-root #{&}--negated {
            background-color: #e50400;
            color: white;
        }
    }

    // Text part of facet term
    @at-root #{&}__text {
        flex: 1 1 auto;
    }

    @at-root #{&}__count {
        flex: 0 1 auto;
        word-break: normal;
    }

    // Bar graph representing the relative count.
    @at-root #{&}__bar {
        position: absolute;
        background-color: #e5e5e5;
        right: 2px;
        top: 0;
        bottom: 0;
        z-index: -1;
    }

    // Button to negate a facet term...
    $negator-width: 12px;

    @at-root #{&}__negator {
        flex: 0 0 $negator-width;
        padding: 0 2px 0 0;
        width: $negator-width;
        height: 10px;
        text-align: right;

        > a {
            display: none;
            width: $negator-width;
            height: 10px;
            color: #e50400;
        }
    }

    /// ...only appears while hovering anywhere over the term.
    &:hover {
        .facet-term__negator > a {
            display: inline;
        }
    }
}

.facet-item {
    overflow: hidden;
    max-width: 200px;
}

.facet-list label {
    margin: 0;
}

.date-selector {
    select {
        border-radius: 2px;
        border: 1px solid #ccc !important;
        font-weight: 400;
        color: inherit !important;
        margin-right: 2px;
    }
}

.date-selector-facet {
    @at-root #{&}__controls {
        display: flex;
        margin: 10px 0;
    }
}

.date-selector-btn {
    color: rgb(79, 104, 158);
    background: none;
    border: none;
    padding-left: 0;
    margin-left: 5px;
    font-size: 1rem;

    &:hover {
        text-decoration: underline;
    }

    .icon-caret-right {
        margin-right: 5px;
    }
}

.date-arrow {
    display: flex;
    flex: 0 1 10%;
    font-size: 12px;
    padding-bottom: 5px;
}

.date-container {
    display: flex;
    position: relative;
    align-items: flex-end;

    .date-selector-module {
        flex: 0 0 45%;

        h6 {
            margin: 10px 0;
        }
    }
}

.reset-date-selector {
    margin-left: 5px;
}

.selected-date-range {
    font-style: italic;
    margin-bottom: 10px;
}

.date-selector-toggle-wrapper {
    .date-selector-toggle {
        display: inline-block;

        input {
            margin: 5px;
        }

        input[disabled] + label {
            color: #9f9f9f;
        }

        margin-right: 10px;
    }

    margin-bottom: 10px;
}

.typeahead-entry, .general-search-entry {
    padding: 2px;
    display: flex;
    align-items: center;
    margin: 5px 0;

    .hiddenscroll & {
        padding-right: 25px;
    }

    .icon-search, .icon-filter {
        margin-right: 5px;
        flex: 0 0 auto;
    }

    .searchform {
        flex: 1 1 auto;
    }

    input {
        border-radius: 5px;
        padding: 4px;
        width: 100%;
    }
}

.typeahead-entry {
    @extend .general-search-entry;

    padding: 0;
    margin: 5px 0 0;
}

.searcherror {
    font-style: italic;
    padding: 10px;
}

.bottom-shading, .top-shading {
    position: absolute;
    right: 29px;
    left: 0;
    height: 30px;
    text-align: center;
    cursor: pointer;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;

    &.hide-shading {
        opacity: 0;
    }
}

.scroll-container, .terms-block {
    position: relative;
}

.bottom-shading {
    padding-bottom: 2px;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), 70%, rgba(0, 0, 0, 0.2));
}

.top-shading {
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.2), 30%, rgba(0, 0, 0, 0));
}

.filter-container {
    display: flex;
    margin: 2px -2px 10px;
    flex-wrap: wrap;
    justify-content: flex-start;

    .filter-link {
        display: flex;
        margin: 2px;
        padding: 0 5px;
        flex-grow: 0;
        align-items: center;
        overflow: hidden;
        font-size: 0.9rem;
        font-weight: normal;
        color: #000;
        background-color: scale-color(#4183c4, $lightness: 70%);
        border: none;
        border-radius: 3px;

        &.filter-link--negative {
            background-color: scale-color(#e50400, $lightness: 70%);
        }

        &.filter-link--alternate {
            background-color: #d0d0d0;
        }

        &:hover {
            text-decoration: none;
        }

        .filter-link__title {
            margin-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .filter-link__icon {
            width: 7px;

            .svg-icon {
                fill: #000;
            }
        }
    }
}

.accession {
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1000;
    max-width: 70%;
}

.accession-note {
    font-size: 0.9rem;
    font-weight: normal;

    a[href^="http"]::after {
        font-size: 0.9rem;
    }
}

.type {
    font-size: 0.9rem;
    font-weight: normal;
    color: #808080;
}

.search-meta {
    position: relative;
    padding: 2px 5px;
    text-align: right;
    z-index: 1;

    p {
        color: #909090;
        margin: 0;
        line-height: 1.2;
        text-align: right;

        &.meta-audit {
            margin: 3px 0;

            .audit {
                margin: 0 3px;
                padding: 0;
                border: none;
                background-color: transparent;
                font-size: 1.3rem;
            }
        }
    }
}

.meta-title {
    margin-bottom: 7px !important;
    font-size: 1.1rem;
    color: #606060 !important;
}

.meta-status {
    font-weight: bold;
}

div.meta-status {
    text-align: right;
}

.main-panel {
    position: relative;
    z-index: 0;
}

@keyframes stretch-bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}

// Styles for publication listing

.list-author {
    margin: 0;
    font-size: 1.1rem;
}

.list-citation {
    margin: 0;
    font-size: 0.9rem;
}

.list-reference {
    display: inline;
    margin: 0 !important;
    font-size: 0.9rem;
}

.list-supplementary__item {
    margin: 0;
    padding: 5px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;

    &:first-child {
        border-top: 1px solid #e8e8e8;
    }

    .btn {
        display: block;
    }
}

.facet--audit-warning {
    margin-right: 20px;

    select {
        width: 100%;
    }
}

// Styles for boolean switch

.boolean-switch {
    display: flex;
    position: relative;
    padding: 2px;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 3px;
    border: 2px solid transparent;

    input[type='checkbox'] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: -1;
    }

    @at-root #{&}__title {
        display: flex;
        align-items: center;
        margin-left: 5px;
    }

    // The actuator slides inside the frame.
    @at-root #{&}__frame {
        position: relative;
        border: none;
        box-shadow: 0 1px 1px inset rgba(0, 0, 0, 0.2);
        transition: background-color 0.2s ease;
    }

    @at-root #{&}__actuator {
        position: absolute;
        top: 2px;
        background-color: #fff;
        transition: left 0.2s ease, border-radius 0.2s ease, width 0.2s ease;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    // Focus border because opacity:0 on <input> also hides this.
    @at-root #{&}--focused {
        border: 2px solid #000;
    }
}

// Style for biochemical inputs facet
.biochemical-toggle-description {
    font-size: 0.9rem;
    padding-bottom: 5px;
}

// Facet groups including the title and subordinate facets.
.facet-group {
    border-bottom: 1px solid #ccc;

    &:last-child {
        border-bottom: none;
    }

    .facet-group__content {
        padding: 0;
        overflow: hidden;
    }
}

$facet-group-title-transition-time: 200ms;
$facet-group-color: #606060;
$facet-group-color-accent: scale-color($facet-group-color, $lightness: 95%);

.facet-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 0;
    border: none;
    background-color: $facet-group-color-accent;
    box-shadow: inset 0 0 12px 6px rgba(0, 0, 0, 0.05);
    transition: background-color $facet-group-title-transition-time linear;

    .facet-group-title__title-name {
        flex: 1 0 auto;
        text-align: left;
    }

    .facet-group-title__title {
        display: flex;
        font-size: 1.2rem;
        font-weight: 600;
        color: #000;
        transition: color $facet-group-title-transition-time linear;
    }

    .facet-group-title__name {
        color: #a0a0a0;
        font-weight: bold;
        font-size: 0.8rem;
        line-height: 0.6;
        transition: color $facet-group-title-transition-time linear;
    }

    .facet-group-title__selection-indicator {
        margin-left: 5px;
        flex: 0 0 8px;
        width: 8px;

        .svg-icon {
            fill: $facet-group-color;
            transition: fill $facet-group-title-transition-time linear;
        }
    }

    .facet-group-title__expand-indicator {
        flex: 0 0 16px;
        width: 16px;

        .svg-icon {
            fill: #000;
            transition: fill $facet-group-title-transition-time linear;
        }
    }

    &.facet-group-title--open {
        background-color: $facet-group-color;
        transition: background-color $facet-group-title-transition-time linear;

        .facet-group-title__title {
            color: #fff;
            transition: color $facet-group-title-transition-time linear;
        }

        .facet-group-title__name {
            color: #e0e0e0;
            transition: color $facet-group-title-transition-time linear;
        }

        .facet-group-title__selection-indicator {
            .svg-icon {
                fill: $facet-group-color-accent;
                transition: fill $facet-group-title-transition-time linear;
            }
        }

        .facet-group-title__expand-indicator {
            .svg-icon {
                fill: #fff;
                transition: fill $facet-group-title-transition-time linear;
            }
        }
    }
}
