/* #region Toolbar */

/**
 * TOOLBAR
 */
.toolbar {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-toolbar-text);
    background-color: var(--color-toolbar-bg);
    padding: var(--margin-blocks-vert-half) var(--margin-blocks-horiz-half);
    z-index: 6;
    /* Necessary to use @container css rules */
    container-name: toolbar;
    container-type: inline-size;
}

.toolbar > :not(:first-child) {
    margin-left: .8em;
}

.toolbar-form {
    padding-left: var(--width-action-bar);
}

.toolbar-preview {
    padding-left: var(--cond-padding-md);
}

.toolbar-list {
    padding-top: 0;
    padding-left: 0;
    border-top-left-radius: var(--border-radius);
}

.toolbar-list, 
.toolbar-planning {
    /* Override default variables */
    --color-toolbar-bg: var(--color-toolbar-list-bg);
    --color-toolbar-text: var(--color-toolbar-list-text);
    --color-toolbar-text-hover: var(--color-toolbar-list-text-hover);
    --color-toolbar-ico-bg: var(--color-toolbar-list-ico-bg);
    --color-toolbar-ico-text: var(--color-toolbar-list-ico-text);
    --color-toolbar-ico-border: var(--color-toolbar-list-ico-border);
    --color-ico-text-hover: var(--color-toolbar-list-text);
}

.objlist .objlist-panel .toolbar-list .toolbar-group:last-child:not(:first-child) {
    justify-content: flex-end;
    margin-right: .5em;
    flex-grow: 0;
}

.toolbar.toolbar-sublist .toolbar-group .as-title,
.toolbar.toolbar-objsel .toolbar-group .as-title,
.objlist .toolbar-list .toolbar-group .as-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    font-size: 12px;
    padding: .2em var(--margin-blocks-horiz-half);
    font-weight: bolder;
    text-transform: uppercase;
    min-width: fit-content;
    color: var(--color-panel-header-text);
    margin-left: 0;
    margin-right: 0;
}

@container toolbar (min-width: 400px) {
    .toolbar.toolbar-sublist .toolbar-group .as-title,
    .toolbar.toolbar-objsel .toolbar-group .as-title,
    .objlist .toolbar-list .toolbar-group .as-title {
        min-width: 100px;
    }
}

@container toolbar (min-width: 600px) {
    .toolbar.toolbar-sublist .toolbar-group .as-title,
    .toolbar.toolbar-objsel .toolbar-group .as-title,
    .objlist .toolbar-list .toolbar-group .as-title {
        min-width: 150px;
    }
}

.panel-header .toolbar {
    width: 100%;
    padding: 0;
    /* Override default variables */
    --color-toolbar-bg: var(--color-toolbar-panel-bg);
    --color-toolbar-text: var(--color-toolbar-panel-text);
    --color-toolbar-text-hover: var(--color-toolbar-panel-text-hover);
    --color-toolbar-ico-bg: var(--color-toolbar-panel-ico-bg);
    --color-toolbar-ico-text: var(--color-toolbar-panel-ico-text);
    --color-toolbar-ico-border: var(--color-toolbar-panel-ico-border);
    --color-ico-text-hover: var(--color-toolbar-panel-text);
}

.menubar-group,
.toolbar-group {
    display: flex;
    align-self: stretch;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.toolbar.toolbar-form .toolbar-group .as-btn.lst-nav:disabled {
    background: var(--color-ico-disabled-ico) !important;
    color: var(--color-ico-disabled-text) !important;
    border-color: var(--color-ico-disabled-ico) !important;
}

.toolbar.toolbar-form .toolbar-group .as-btn.btn-save:hover > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-edit:hover > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-copy:hover > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-new:hover > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-cancel:hover > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-delete:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-save:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-edit:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-copy:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-new:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-cancel:hover > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-delete:hover > span:first-child {
    color: var(--color-toolbar-ico-text);
}
/* ALL */
.toolbar.toolbar-form .toolbar-group button:hover,
.toolbar.toolbar-form .toolbar-group .as-btn:hover,
.toolbar.toolbar-preview .toolbar-group button:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn:hover {
    background-color: var(--color-modal-confirm-bg);
    border-color: var(--color-modal-confirm-bg);
    color: var(--color-toolbar-ico-text);
}
/* SAVE */
.toolbar.toolbar-form .toolbar-group .as-btn.btn-save > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-save > span:first-child {
    color: var(--color-modal-success-bg);
}
.toolbar.toolbar-form .toolbar-group .as-btn.btn-save:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-save:hover {
    background-color: var(--color-modal-success-bg);
    border-color: var(--color-modal-success-bg);
    color: var(--color-toolbar-ico-text);
}
/* NEW */
.toolbar.toolbar-form .toolbar-group .as-btn.btn-new > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-new > span:first-child {
    color: var(--color-modal-confirm-bg);
}
.toolbar.toolbar-form .toolbar-group .as-btn.btn-new:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-new:hover {
    background-color: var(--color-modal-confirm-bg);
    border-color: var(--color-modal-confirm-bg);
    color: var(--color-toolbar-ico-text);
}
/* EDIT / COPY */
.toolbar.toolbar-form .toolbar-group .as-btn.btn-edit > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-copy > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-edit > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-copy > span:first-child {
    color: var(--color-toolbar-list-ico-warning);
}
.toolbar.toolbar-form .toolbar-group .as-btn.btn-edit:hover, 
.toolbar.toolbar-form .toolbar-group .as-btn.btn-copy:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-edit:hover, 
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-copy:hover {
    background-color: var(--color-toolbar-list-ico-warning);
    border-color: var(--color-toolbar-list-ico-warning);
    color: var(--color-toolbar-ico-text);
}
/* CANCEL / DELETE */
.toolbar.toolbar-form .toolbar-group .as-btn.btn-cancel > span:first-child,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-delete > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-cancel > span:first-child,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-delete > span:first-child {
    color: var(--color-toolbar-list-ico-danger);
}
.toolbar.toolbar-form .toolbar-group .as-btn.btn-cancel:hover,
.toolbar.toolbar-form .toolbar-group .as-btn.btn-delete:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-cancel:hover,
.toolbar.toolbar-preview .toolbar-group .as-btn.btn-delete:hover {
    background-color: var(--color-modal-error-bg);
    border-color: var(--color-modal-error-bg);
    color: var(--color-toolbar-ico-text);
}

.toolbar-group > .btn-group:not(:first-child) {
    margin-left: .8em;
}

.toolbar-group .current-form-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0px;
    margin-left: 0px;
    height: 23px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-form-bar-current-mode);
    background-color: var(--color-form-bar-current-mode);
    color: var(--color-form-bar-current-mode-text);
}

.toolbar-group .current-form-mode span {
    font-weight: bold !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 2px 10px;
}

.toolbar-group .current-form-mode span i {
    margin-right: .5em;
}

.dl-toolbar-group {
    flex-grow: 1; 
    justify-content: flex-end;
}

.menubar-group > :not(:first-child),
.toolbar-group > :not(:first-child) {
    margin-left: .8em;
}

.toolbar-title {
    flex-grow: 1;
    justify-content: center;
}

.menubar-group:last-child:not(:first-child) {
    justify-content: flex-end;
    margin-right: .5em;
    flex-grow: 1;
}

.toolbar-group:last-child:not(:first-child) {
    justify-content: flex-end;
    margin-right: .5em;
}

.toolbar .as-ico,
.toolbar .as-btn,
.toolbar .as-input,
.toolbar .custom-select,
.toolbar .custom-select select,
.toolbar .custom-datalist,
.toolbar .custom-datalist input,
.toolbar .custom-datalist select {
    color: var(--color-toolbar-ico-text);
    border-color: var(--color-toolbar-ico-bg);
    background-color: var(--color-toolbar-ico-bg);
}

.toolbar .custom-select::after,
.toolbar .custom-datalist::after {
    color: var(--color-toolbar-text);
}

.toolbar .as-input::placeholder,
.toolbar .custom-datalist-input::placeholder, 
.toolbar .custom-datalist-input:focus::placeholder {
    color: var(--color-toolbar-placeholder-text);
}

.toolbar .as-ico {
    font-size: var(--font-size-top-icons);
}

.toolbar .custom-datalist {
    margin: 0 var(--margin-buttons-half);
}

.toolbar .as-ico:hover, 
.toolbar .as-btn:hover span > span, 
.toolbar .custom-select:hover, 
.toolbar .custom-select:hover select {
    cursor: pointer;
    color: var(--color-toolbar-text-hover);
}

.toolbar .custom-select {
    max-width: 15em;
}

.toolbar-toggle-group-btn {
    margin-left: .25em;
}

.toolbar-list .toolbar-toggle-group-btn-lg {
    margin-left: auto !important;
}

.toolbar-list .toolbar-group-toggleable-lg {
    margin-right: auto !important;
}

/* Toggleable fixed */
.toolbar-toggle-group-btn-fixed.toggled {
    color: var(--color-toolbar-list-ico-primary-hover) !important;
    border-color: var(--color-toolbar-list-ico-primary-hover) !important;
}

.toolbar-group-toggleable-fixed {
    position: absolute;
    right: .25em;
    top: calc(var(--margin-blocks-vert-half) + 30px - 0.5em);
    width: fit-content;
    min-width: 62px;
    justify-content: center;
    padding: .5em;
    background-color: var(--color-panel-bg);
    border-radius: var(--border-radius-panel);
    box-shadow: 0px 8px 16px 0px var(--color-menubar-dropdown-shadow);
}

.toolbar-group-toggleable-fixed .as-ico {
    border-color: var(--color-panel-bg);
    background-color: var(--color-panel-bg);
}

.toolbar-group-toggleable-fixed:not(.show-toolbar-group) {
    display: none !important;
}

/* Toggleable xs */
@container toolbar (min-width: 471px) {
    .toolbar-toggle-group-btn-xs {
        display: none !important;
    }
}

@container toolbar (max-width: 470px) {
    .toolbar-toggle-group-btn-xs.toggled {
        color: var(--color-toolbar-list-ico-primary-hover) !important;
        border-color: var(--color-toolbar-list-ico-primary-hover) !important;
    }
    .toolbar-group-toggleable-xs {
        position: absolute;
        right: .25em;
        top: calc(var(--margin-blocks-vert-half) + 30px - 0.5em);
        width: fit-content;
        min-width: 62px;
        justify-content: center;
        padding: .5em;
        background-color: var(--color-panel-bg);
        border-radius: var(--border-radius-panel);
        box-shadow: 0px 8px 16px 0px var(--color-menubar-dropdown-shadow);
    }
    .toolbar .toolbar-group-toggleable-xs .as-ico {
        border-color: var(--color-panel-bg);
        background-color: var(--color-panel-bg);
    }
    .toolbar-group-toggleable-xs:not(.show-toolbar-group) {
        display: none !important;
    }
}

/* Toggleable sm */
@container toolbar (min-width: 571px) {
    .toolbar-toggle-group-btn-sm {
        display: none !important;
    }
}

@container toolbar (max-width: 570px) {
    .toolbar-toggle-group-btn-sm.toggled {
        color: var(--color-toolbar-list-ico-primary-hover) !important;
        border-color: var(--color-toolbar-list-ico-primary-hover) !important;
    }
    .toolbar-group-toggleable-sm {
        position: absolute;
        right: .25em;
        top: calc(var(--margin-blocks-vert-half) + 30px - 0.5em);
        width: fit-content;
        min-width: 62px;
        justify-content: center;
        padding: .5em;
        background-color: var(--color-panel-bg);
        border-radius: var(--border-radius-panel);
        box-shadow: 0px 8px 16px 0px var(--color-menubar-dropdown-shadow);
    }
    .toolbar .toolbar-group-toggleable-sm .as-ico {
        border-color: var(--color-panel-bg);
        background-color: var(--color-panel-bg);
    }
    .toolbar-group-toggleable-sm:not(.show-toolbar-group) {
        display: none !important;
    }
}

/* Toggleable default */
@container toolbar (min-width: 1024px) {
    .toolbar-toggle-group-btn {
        display: none !important;
    }
}

@container toolbar (max-width: 1023px) {
    .toolbar-toggle-group-btn.toggled {
        color: var(--color-toolbar-list-ico-primary-hover) !important;
        border-color: var(--color-toolbar-list-ico-primary-hover) !important;
    }
    .toolbar.toolbar-form .toolbar-toggle-group-btn.toggled {
        color: var(--color-toolbar-ico-text) !important;
        border-color: var(--color-toolbar-ico-text) !important;
    }
    .toolbar-group-toggleable {
        position: absolute;
        right: .25em;
        top: calc(var(--margin-blocks-vert-half) + 30px - 0.5em);
        width: fit-content;
        min-width: 62px;
        justify-content: center;
        padding: .5em;
        background-color: var(--color-panel-bg);
        border-radius: var(--border-radius-panel);
        box-shadow: 0px 8px 16px 0px var(--color-menubar-dropdown-shadow);
    }
    .toolbar.toolbar-form .toolbar-group-toggleable {
        background-color: var(--color-toolbar-ico-bg);
    }
    .toolbar-group-toggleable:not(.show-toolbar-group) {
        display: none !important;
    }
}

/* Toggleable lg */
@container toolbar (min-width: 1101px) {
    .toolbar-toggle-group-btn-lg {
        display: none !important;
    }
}

@container toolbar (max-width: 1100px) {
    .toolbar-toggle-group-btn-lg.toggled {
        color: var(--color-toolbar-list-ico-primary-hover) !important;
        border-color: var(--color-toolbar-list-ico-primary-hover) !important;
    }

    .toolbar-group-toggleable-lg {
        position: absolute;
        right: .25em;
        top: calc(var(--margin-blocks-vert-half) + 30px - 0.5em);
        width: fit-content;
        min-width: 62px;
        justify-content: center;
        padding: .5em;
        background-color: var(--color-panel-bg);
        border-radius: var(--border-radius-panel);
        box-shadow: 0px 8px 16px 0px var(--color-menubar-dropdown-shadow);
    }

    .toolbar .toolbar-group-toggleable-lg .as-ico {
        border-color: var(--color-panel-bg);
        background-color: var(--color-panel-bg);
    }

    .toolbar-group-toggleable-lg:not(.show-toolbar-group) {
        display: none !important;
    }
}

/* Hide ctrl + click search on tablet/mobile devices */
@container toolbar (max-width: 570px) {
    .toolbar .as-list-control-search {
        display: none !important;
    }
}

/* Show ctrl + click search on tablet/mobile devices */
@container toolbar (min-width: 571px) {
    .toolbar .as-list-control-search {
        display: flex !important;
    }
}

.toolbar .objsel-add-new-row.tabable:focus {
    border-color: transparent !important;
    outline: calc(2 * var(--border-width)) solid rgba(var(--pcolor-buttons-text), 1) !important;
}

.toolbar-sublist{
    z-index: 2;
}

/* #endregion */


/* #region Subbar */

/**
 * SUBBAR
 */
.as-form-bar {
    display: flex;
    align-items: center;
    min-height: 24px;
    padding: var(--margin-blocks-vert-half) calc(10px + var(--dl-col-padding-h-half));
    color: var(--color-form-bar-text);
    background-color: var(--color-form-bar-bg);
    box-sizing: border-box;
}

.as-form-container > .as-form-bar {
    min-height: 48px;
}

.as-form-bar .as-title-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--color-light-text);
    border: none;
    border-radius: var(--border-radius);
    background-clip: padding-box;
    overflow: hidden;
    height: 24px;
}

.as-form-bar .as-title-container .as-title {
    font-size: 12px;
    letter-spacing: 1px;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin-right: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    background-clip: padding-box;
}

.as-form-bar .as-title-container .copy-clipboard-container {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-text);
    background-color: var(--color-list-bg);
    height: 100%;
    background-clip: padding-box;
}

.as-form-bar .as-title-container .copy-clipboard-container:hover {
    color: var(--color-light-text);
    background-color: var(--color-environment-bg);
}

.as-bar-title-highlight {
    border-radius: 10px;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-right: 0;
    padding-left: 0.8em;
}

.as-form-bar .as-title-container .as-title:empty,
.as-bar-title-highlight:empty {
    padding: 0;
}

.copy-clipboard-ico {
    cursor: pointer;
    border: none;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0;
    padding-right: 0.5em;
}

/* #endregion */