/* PF - UI Fields: toggle bool, button enum, link list. */

/* --- Toggle bool ------------------------------------------------------- */

.pf-toggle-pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.pf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: normal;
    user-select: none;
}

.pf-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pf-toggle .pf-toggle-track {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background-color: var(--pf-off-color, #b0bec5);
    transition: background-color 0.15s ease-in-out;
    flex-shrink: 0;
}

.pf-toggle .pf-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.15s ease-in-out;
}

.pf-toggle input:checked + .pf-toggle-track {
    background-color: var(--pf-on-color, #7cb342);
}

.pf-toggle input:checked + .pf-toggle-track .pf-toggle-thumb {
    left: 20px;
}

.pf-toggle input:focus-visible + .pf-toggle-track {
    outline: 2px solid #337ab7;
    outline-offset: 1px;
}

.pf-toggle .pf-toggle-label-on {
    display: none;
}

.pf-toggle .pf-toggle-label-off {
    display: inline;
}

.pf-toggle input:checked ~ .pf-toggle-label-on {
    display: inline;
}

.pf-toggle input:checked ~ .pf-toggle-label-off {
    display: none;
}

/* --- Button enum ------------------------------------------------------- */

.pf-btn-enum {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pf-btn-enum .btn {
    border-radius: 4px;
}

/* Keep button groups from overflowing narrow list cells. */
td .pf-btn-enum {
    max-width: 100%;
}

/* --- Link list --------------------------------------------------------- */

.pf-link-list {
    margin-bottom: 0;
}

.pf-link-list-item {
    padding: 2px 0;
}

.pf-link-list-unlink {
    margin-left: 8px;
    color: #999;
    cursor: pointer;
}

.pf-link-list-unlink:hover {
    color: #d9534f;
}