/* ************************************************** */
/* #region MENU-ITEM-GROUP                            */
/* ************************************************** */

menu-item-group {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    width: 100%;
    padding: 0.25em;
    border-bottom: var(--border-width) solid var(--border-color);
    overflow: auto;
}

menu-item-group:last-child {
    border-bottom: 0;
}

menu-item-group:empty {
    display: none;
}

.dropdown-menu-note {
    padding: 0.25em;
    border-top: 1px solid var(--border-color);
}

/* #endregion */

/* ************************************************** */
/* #region MENU-ITEM WRAPPER                          */
/* Only used if menu-item has menu-item-tools         */
/* ************************************************** */

.menu-item-wrapper {
    display: grid;
    grid-template-areas: "menu-item-wrapper";
    align-items: center;
    position: relative;
}

.menu-item-wrapper > .menu-item {
    grid-area: menu-item-wrapper;
    padding-inline: 0.125em 3em;
}

.menu-item-tools {
    grid-area: menu-item-wrapper;
    justify-self: flex-end;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.25em;
    width: fit-content;
    height: fit-content;
    padding: 0.125em;
    z-index: 1;
}

.menu-item-tool:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.menu-item-tool.active {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

/* #endregion */

/* ************************************************** */
/* #region MENU-ITEM                                  */
/* ************************************************** */

.menu-item {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding-inline: 0.125em 1.5em;
    padding-block: 0.125em;
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
}

.menu-item-label-icon {
    align-self: first baseline;
    width: max(1.5em, 3ch);
    margin-right: 1ch;
}

.menu-item-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1ch;
}

button.menu-item:hover .menu-item-label {
    text-decoration: underline;
}

/* #endregion */

/* ************************************************** */
/* #region OPTIONS-GROUP MENU-ITEM                    */
/* ************************************************** */

.options-group .menu-item {
    padding-inline: 0.125em;
}

/* #endregion */

/* ************************************************** */
/* #region EMPTY MENU-ITEM                            */
/* ************************************************** */

/* Hide the "No saved notes/chats" message when there is at least 1 note */
.all-items-list:has(.checkbox-item) .empty-item {
    display: none;
}

.menu-item.empty-item {
    padding-left: 6px;
    pointer-events: none;
}

/* #endregion */

/* ************************************************** */
/* #region NUM INPUT MENU-ITEM                        */
/* ************************************************** */

.num-item {
    justify-content: space-between;
    padding-inline: 0.125em;
}

/* #endregion */

/* ************************************************** */
/* #region RANGE INPUT MENU-ITEM                      */
/* ************************************************** */

.menu-item-value {
    margin-inline: 1ch;
    text-align: right;
}

.range-item {
    padding-inline: 0.125em 0.5em;
    color: var(--text-color);
}

.range-item .menu-item-label {
    justify-content: space-between;
}

.range-item input[type="range"] {
    width: 3em;
}

.range-item:hover input[type="range"].discrete-range::-webkit-slider-thumb {
    box-shadow: 0 0 0 var(--border-width) var(--bg-color-hover);
}

/* #endregion */

/* ************************************************** */
/* #region CHECKBOX/RADIO MENU-ITEMS                  */
/* ************************************************** */

.checkbox-item .menu-item-label,
.radio-item .menu-item-label {
    align-self: first baseline;
}

.checkbox-item:hover .menu-item-label,
.radio-item:hover .menu-item-label {
    text-decoration: underline;
}

.checkbox-item::before,
.radio-item::before {
    flex-shrink: 0;
    align-self: first baseline;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(1.5em, 3ch);
    height: 1.5em;
    margin-right: 1ch;
}

/* ========================== */
/* #region Checkbox menu-item */
/* ========================== */

.checkbox-item::before {
    content: "[ ]";
}

.checkbox-item:has(input:indeterminate)::before {
    content: "[–]";
}

.checkbox-item:has(input:checked)::before {
    content: "[×]";
}

.checkbox-item:has(input[disabled]:checked)::before {
    content: "[ ]";
}

/* #endregion */

/* ======================= */
/* #region Radio menu-item */
/* ======================= */

.radio-item::before {
    content: "( )";
}

.radio-item:has(input:checked)::before {
    content: "(×)"
}

.radio-item:has(input[disabled]:checked)::before {
    content: "( )";
}

/* #endregion */

/* #endregion */

/* ************************************************** */
/* #region COLOR MENU-ITEM                            */
/* ************************************************** */

.color-item {
    padding-inline: 0.25em 0.5em;
}

.color-item input {
    margin-left: 2ch;
}

/* #endregion */

/* ************************************************** */
/* #region SUBMENU ACTIVATOR                          */
/* ************************************************** */

.submenu-activator {
    padding-inline: 0.125em;
}

.submenu-activator::after {
    content: "⏵";
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2ch;
}

/* #endregion */

/* ************************************************** */
/* #region MASTER SELECT-ALL TOGGLE                   */
/* ************************************************** */

.master-select-all-toggle-container {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    z-index: 1;
}

/* #endregion */