/**
 * TODO Ce fichier sera à ré-écrire entièrement pour la refonte V12.
 * En attendant, il fonctionne mais sans utiliser les variables pour les couleurs, espaces, etc.
 */
.udem-sg-recherche-reglements {
    margin-bottom: 2em;
    .udem-sg-recherche-reglements-filter-query {
        margin: 1em auto;
        max-width: 100%;
        position: relative;
        > input {
            caret-color: #333;
            padding-right: 52px;
            width: 100%;
            &::-ms-clear {
                display: none;
            }
        }
        > .glyphicon-search,
        > .close {
            position: absolute;
            top: 1px;
            right: 1px;
            line-height: 37px;
            width: 40px;
            padding: 0 12px;
            color: #333;
        }
        > .glyphicon-search {
            pointer-events: none;
            font-size: 16px;
            background: #d7d7d7;
        }
        > .close {
            cursor: pointer;
            &,
            &:hover,
            &:focus {
                opacity: 1;
            }
        }
    }
    .udem-sg-recherche-reglements-filter-categories {
        text-align: right;
        margin: 24px 0 0;
        position: relative;
        border: 1px solid rgba(60, 60, 60, .26);
        display: flex;
        padding-left: 12px;
        label {
            flex: 0 1 auto;
            color: #999;
            font-weight: normal;
            margin: 4px 12px 0 0;
            padding: 1px 0 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: none;

            @media (min-width: 768px) {
                display: inline;
            }

            /* Add padding to cover close button only when visible */
            &:not([style*='display']),
            &:not([style*='none']) {
                & + .v-select .dropdown-toggle .vs__selected-options {
                    padding-right: 30px;
                }
            }
        }

        .v-select {
            flex: 1 1 auto;
            text-align: left;
            position: static;
            .dropdown-toggle {
                border-radius: 0;
                border: 0 none;
                .vs__selected-options {
                    padding-left: 0;
                }
            }
            .selected-tag {
                border: 0 none;
                padding: 1px 8px;
                min-height: 29px;
                .close {
                    padding: 0 2px 0 5px;
                }
            }
            .vs__actions {
                padding-right: 14px;
            }
            .open-indicator {
                align-items: flex-start;
                transform: translate(0, 12px);
                &::before {
                    transform: rotate(135deg);
                }
            }
            &.open .open-indicator {
                transform: translate(0, 15px);
                &::before {
                    transform: rotate(315deg);
                }
            }
            li > a {
                padding: 3px 12px;
            }
            input[type=search] {
                padding: 0 12px 0 0;
                &,
                &:focus {
                    height: 29px;
                }
            }
            .selected-tag + input[type=search] {
                padding-left: 4px;
            }
        }
        .dropdown .dropdown-menu {
            overflow-y: auto;
            box-sizing: content-box;
            margin-left: -1px;
            border-radius: 0;
            /* Fix for .ce-frame-default li. */
            li {
                margin-bottom: 0;
            }
        }
    }

    .udem-sg-recherche-reglements-filter-reset-categories {
        position: absolute;
        top: 0;
        right: 28px;
        width: 37px;
        height: 37px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 24px;
        line-height: 1;
        font-weight: 900;
        color: #333;
    }

    .udem-sg-recherche-reglements-filter-groups {
        text-align: center;
        > li {
            display: inline-block;
        }
        > li > a {
            margin: 0 2px;
            padding: 6px;
            min-width: 36px;
            min-height: 36px;
        }
    }

    .udem-sg-recherche-reglements-filter-reset-group {
        font-size: 24px;
        line-height: 1;
        font-weight: 900;
        color: #f36523;
    }
    .udem-sg-recherche-reglements-search-header {
        margin: 25px 0 15px;
        border-bottom: 1px solid #d7d7d7;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .udem-sg-recherche-reglements-sort-container {
        flex: 0 1 auto;
        display: flex;
        flex-wrap: wrap;
        > span,
        > button {
            padding: 5px 10px;
            font-size: 0.9em;
            &,
            &:hover,
            &:active {
                border: 1px solid #d7d7d7;
                border-bottom: 0 none;
                &:not(:first-child) {
                    border-left: 0 none;
                }
            }
        }
        > span {
            white-space: nowrap;
            flex: 1 1 auto;
        }
        > button {
            flex: 0 1 auto;
            text-transform: uppercase;
            background: #f2f2f2;
            &.active {
                background: #e4e4e4;
            }
        }

        @media (max-width: 768px) {
            flex: 1 1 auto;
            > span {
                flex: 1 1 100%;
            }
            > button {
                flex: 1 1 auto;
            }
            button.udem-sg-recherche-reglements-btn-sort-by-name {
                border-left: 1px solid #d7d7d7;
            }
        }
    }
    .udem-sg-recherche-reglements-explain {
        flex: 1 1 auto;
        padding: 4px 0;
        h1,
        h2,
        h3 {
            margin: 0;
        }
        h2 {
            color: #333;
            text-transform: uppercase;
            font-size: 18px;
            border-bottom: 0 none !important;
        }
    }

    .udem-sg-recherche-reglements-entry {
        padding: 16px 0;
        border-bottom: 1px solid #d7d7d7;
        &:last-child {
            border-bottom: 0 none;
        }
        > a {
            font-size: 16px;
        }
    }

    .udem-sg-recherche-reglements-infos-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        align-content: center;
        a {
            display: inline-block;
        }
    }

    .udem-sg-recherche-reglements-left-container,
    .udem-sg-recherche-reglements-right-container,
    .udem-sg-recherche-reglements-categories-container,
    .udem-sg-recherche-reglements-extensions-container {
        flex: 1 1 auto;
        display: flex;
        align-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .udem-sg-recherche-reglements-left-container,
    .udem-sg-recherche-reglements-right-container {
        margin-bottom: 10px;
    }

    .udem-sg-recherche-reglements-left-container {
        text-align: left;
    }
    .udem-sg-recherche-reglements-right-container {
        justify-content: flex-end;
        > *:not(:last-child) {
            margin-right: 1px;
        }
    }

    .udem-sg-recherche-reglements-rule-number,
    .udem-sg-recherche-reglements-types-separator {
        margin-right: 5px;
    }

    .udem-sg-recherche-reglements-categories-container,
    .udem-sg-recherche-reglements-extensions-container {
        flex: 0 1 auto;
        justify-content: right;
        > *:not(:last-child) {
            margin-right: 1px;
        }
    }

    .udem-sg-recherche-reglements-types-container {
        font-weight: bold;
        font-size: 13px;
        text-transform: uppercase;
    }
    .udem-sg-recherche-reglements-types-container,
    .udem-sg-recherche-reglements-last-modified-container {
        white-space: nowrap;
    }

    .udem-sg-recherche-reglements-last-modified-container {
        color: #999;
    }

    .udem-sg-recherche-reglements-label {
        font-size: 13px;
        padding: 5px 10px;
        min-width: 50px;
        text-transform: uppercase;
        display: inline-block;
        text-align: center;
    }

    .udem-sg-recherche-reglements-label-default {
        background: #f2f2f2;
        color: #333;
    }

    .udem-sg-recherche-reglements-label-primary {
        background: #05598E;
        color: #fff;
    }

    .udem-sg-recherche-reglements-group-header {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    @media (max-width: 768px) {
        .udem-sg-recherche-reglements-entry {
            border-bottom: 1px solid #d7d7d7;
            padding-bottom: 1em;
            .label {
                display: none;
            }
        }
    }
}