/* Lists
   ========================================================================== */

/**
 * Address paddings set differently.
 */

menu,
ol,
ul {
    padding: 0 0 0 2em;
}

/**
 * Swap padding positions in RTL languages.
 */

[dir="rtl"] {
    menu,
    ol,
    ul {
        padding: 0 2em 0 0;
    }
}

/**
 * Remove margins from nested lists.
 */

li {
    > ul,
    > ol {
        margin: 0;
    }
}

/**
 * CSS Lists and Counters Module Level 3 list marker styling.
 */

li::marker {
    color: color-text-heading;
}

@include dark-mode {
    li::marker {
        color: $dark-color-text-heading;
    }
}

/**
 * Address margins set differently.
 */

dd {
    margin: 0 0 0 2em;
}

/**
 * Swap margin positions in RTL languages.
 */

[dir="rtl"] dd {
    margin: 0 2em 0 0;
}

/**
 * Have a list with no bullets/numerals.
 *
 * Example HTML:
 *
 * <ul class="plain-list">
 * <ol class="plain-list">
 */

.plain-list {
    padding: 0;
    list-style: none;
}

/**
 * Ensure padding stays removed in RTL languages.
 *
 * Required for specificity.
 */

[dir="rtl"] .plain-list {
    padding: 0;
}

/**
 * Switcher lists, to swap between different page templates/form templates/etc.
 *
 * Example HTML:
 *
 * <ul class="switcher-list">
 *     <li class="active"></li>
 *     <li><a></a></li>
 *     <li><a></a></li>
 * </ul>
 */

.switcher-list {
    margin: 0 -1em;
    padding: 0;
    list-style: none;

    li {
        position: relative;
        border-top: 1px solid $color-border-light;
        border-bottom: 1px solid transparent;

        &:nth-child(odd) {
            background: $color-background;
        }

        &:first-child {
            border-top: 0;
        }

        &.active,
        &.ui-tabs-active {
            background: $color-highlight-box;
        }

        &.selected {
            background: $color-selected;
        }
    }

    a {
        display: block;
        padding: 0.38461538461538em 2.5em 0.38461538461538em 1em;
        overflow: hidden;
        font-weight: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@include dark-mode {
    .switcher-list li {
        border-top: 1px solid $dark-color-gradient-to;

        &:nth-child(odd) {
            background: $dark-color-background;
        }

        &:first-child {
            border-top: 0;
        }

        &.active,
        &.ui-tabs-active {
            background: $dark-color-highlight-box;
        }

        &.selected {
            background: $dark-color-selected;
        }
    }
}

[dir="rtl"] .switcher-list {
    padding: 0;

    a {
        padding: 0.38461538461538em 1em 0.38461538461538em 2.5em;
    }
}

/**
 * Multi-edit checkboxes within switcher lists.
 */

.switcher-action {
    position: absolute;
    z-index: 2;
    top: 0.38461538461538em; // 5px / 13px
    left: 1em;

    + a {
        padding-right: 1em;
        padding-left: 2.5em;
    }
}

[dir="rtl"] .switcher-action {
    right: 1em;
    left: auto;

    + a {
        padding-right: 2.5em;
        padding-left: 1em;
    }
}

/**
 * 'Destroy' buttons within switcher lists.
 */

.switcher-list .destroy {
    position: absolute;
    z-index: 2;
    top: 0.46153846153846em; // 6px / 13px
    right: 1em;
}

[dir="rtl"] .switcher-list .destroy {
    right: auto;
    left: 1em;
}