/* Collection Tree Select — admin styling for the tree picker. */

/* Match Omeka admin's input metrics so the widget doesn't look bolted on. */
.select2-container--default .select2-selection--single {
    height: 34px;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    background-color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: #4d4d4d;
    padding-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-container--default .select2-results__option {
    padding: 5px 10px;
}

/*
 * Tree rows.
 *
 * The row bleeds back over the list item's own 5px/10px padding and re-applies
 * it, so the tint and the edge stripe fill the full width of the row instead of
 * stopping short of it. --cts-indent, --cts-tint and --cts-accent are set inline
 * per option by the init script; the fallbacks below are what an uncoloured row
 * (colours turned off, or a collection with no tree row) gets.
 */
.cts-option {
    display: block;
    position: relative;
    margin: -5px -10px;
    padding: 5px 10px 5px calc(10px + var(--cts-indent, 0px));
    background: var(--cts-tint, transparent);
    /*
     * Edge stripe in the tree's own colour, at a fixed x for every depth, so a
     * whole tree reads as one band down the left of the list. An inset shadow
     * rather than a border, so it costs no layout width; it is painted over the
     * list item behind it, and it is independent of `background`, which is what
     * lets it survive the highlight rule below.
     */
    box-shadow: inset 3px 0 0 var(--cts-accent, transparent);
}

/* Root collections read as section headers without being unselectable. */
.cts-option.cts-root {
    font-weight: 600;
}

/* A hairline guide just left of each nested label, so deep trees stay readable. */
.cts-option:not(.cts-root)::before {
    content: '';
    position: absolute;
    left: calc(1px + var(--cts-indent, 0px));
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cfcfcf;
}

/*
 * Let select2's highlight show through on hover/keyboard focus: the tint would
 * otherwise paint straight over it. The edge stripe is a box-shadow, so it
 * survives and the row still says which tree it belongs to.
 */
.select2-container--default .select2-results__option--highlighted[aria-selected] .cts-option {
    background: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] .cts-option::before {
    background: rgba(255, 255, 255, 0.45);
}

/* Closed control: a dot in the colour of the tree the selection came from. */
.cts-selection.cts-has-colour::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--cts-accent);
    vertical-align: baseline;
}

/* Keep the widget inside Omeka's column grid. */
#collection-form .select2-container,
.field .select2-container {
    max-width: 100%;
}

/*
 * CollectionTree's tree page (#collection-tree), decorated to match the picker.
 *
 * Its own markup is a plain nested <ul>, which the browser indents by nesting the
 * lists. That is flattened here — every row becomes a full-width block indented by
 * --cts-indent instead — so the tint spans the row and the per-tree stripes line
 * up in one column down the page, exactly as they do in the open dropdown. All of
 * it is scoped to .cts-tree, a class the script adds, so a public theme's own list
 * styling is untouched everywhere else.
 */
.cts-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cts-tree li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cts-tree .cts-row {
    display: block;
    position: relative;
    padding: 6px 10px 6px calc(10px + var(--cts-indent, 0px));
    background: var(--cts-tint, transparent);
    box-shadow: inset 3px 0 0 var(--cts-accent, transparent);
    text-decoration: none;
}

/* Root collections read as section headers, matching the dropdown. */
.cts-tree .cts-row.cts-root {
    font-weight: 600;
}

/* Same hairline guide as the dropdown rows. */
.cts-tree .cts-row:not(.cts-root)::before {
    content: '';
    position: absolute;
    left: calc(1px + var(--cts-indent, 0px));
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cfcfcf;
}

/* A link row is still a link; keep a hover affordance the tint cannot hide. */
.cts-tree a.cts-row:hover,
.cts-tree a.cts-row:focus {
    text-decoration: underline;
}

/* The unlinked row — the collection you are looking at — reads as "you are here". */
.cts-tree span.cts-row {
    font-style: italic;
}

/* Plain-select fallback: preserve the non-breaking-space indentation. */
select#collection-id option,
select[name="metadata[collection_id]"] option,
select[name="collection_tree_parent_collection_id"] option {
    white-space: pre;
}