.etch-builder-accordion__header.etch-builder-accordion__header--selected {
    background: #57E9DB !important;
    color: #000 !important;
}

.etch-builder-accordion__header.etch-builder-accordion__header--selected .etch-builder-accordion__quick-actions svg {
    color: #000;
}

/* =========================
INCREASE BUILDER UI CONTRAST
========================= */

:root {
    --e-base: hsl(240, 5%, 6%);
    --e-foreground-color-muted: #ffffff;
    --e-light: hsl(240, 7%, 99%);
    --e-base-light: hsl(240, 4%, 14%);
    --e-canvas-background-color: hsl(240, 5%, 6%);
    --etch-panel-bg: hsl(240, 5%, 6%);

    /* New component UI */
    --etch-neutral-dark: #202020;
    --etch-opacity-high: 1;
    --etch-opacity-low: .8;
}

.icon-wrapper:not(.etch-builder-accordion__quick-actions .icon-wrapper) svg {
    color: #ffffff;
    fill: #ffffff;
}
.icon-wrapper:not(.etch-builder-accordion__quick-actions .icon-wrapper) {
    border-radius: var(--radius);
}

/* move the template button to the top*/
#bits-c3 {
    order: 99;
}

/* media library tab colors wrong*/
.media-router .media-menu-item {
    color: black;
}

/* Etch In-Builder CSS Improvements - v1.6 - 2026-04-24 */
/* Includes:
-- 'Fullscreen' Windows fill more of the screen 
-- Backdrop added to Dialog windows to improve visibility
-- 'Add Element' Button Styled
-- Command Window - Patterns/Components moved to top
-- Command Window - Patterns/Components have thematic colouring to add disticintion
-- Content Hub - Open in Builder and Delete Buttons Reordered and styled to reduce accidental actions
-- Component 'Select' fields have max-height and scroll vertically for occasions where there are lots of options
-- Context Menu Colours and Icons for Convert to Component/Pattern
-- Mini GUI Active State Colouring
*/

/* Max Full Screen Dialog Bigger */
.dialog-content.etch-dialog--full-screen {
    max-width: 95dvw !important;
    max-height: 95dvh !important;
}

/* Make Dialog Backdrop Darker */
.dialog-overlay {
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(2px);
}

.command-viewport {
    display: flex;
    flex-direction: column;
    max-height: 80vh !important;
}

.command-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-value="add pattern/component"] {
    order: -1;
}

[data-value*="insert.component"] {
    background-color: var(--e-component-dark);
}

[data-value*="insert.component"]:hover,
[data-value*="insert.component"][data-selected] {
    background-color: var(--e-component-semi-dark) !important;
}

[data-value*="insert.pattern"] {
    background-color: #ac6d43;
}

[data-value*="insert.pattern"]:hover,
[data-value*="insert.pattern"][data-selected] {
    background-color: #d37d44 !important;
}

.etch-combobox__content {
    max-height: 50vh;
    overflow-y: scroll;
}

/* Element Menu (Bottom Bar) */
.element-menu > button[aria-label="Add loop block"],
.element-menu > button[aria-label="Add condition block"],
.element-menu > button:last-of-type{
    --color-mix-perc: 20%;
}

.element-menu > button[aria-label="Add loop block"]:hover,
.element-menu > button[aria-label="Add condition block"]:hover,
.element-menu > button:last-of-type:hover {
    --color-mix-perc: 30%;
}

.element-menu > button[aria-label="Add loop block"]{
    background-color: color-mix(in oklch, var(--e-loop) var(--color-mix-perc), transparent) !important;
    color: var(--e-loop);
}

.element-menu > button[aria-label="Add condition block"]{
    background-color: color-mix(in oklch, var(--e-condition) var(--color-mix-perc), transparent) !important;
    color: var(--e-condition);
}

.element-menu > button:last-of-type {
    background-color: color-mix(in oklch, var(--e-primary) var(--color-mix-perc), transparent) !important;
    color: var(--e-primary);
}

/* Right Click Menu */
div[textvalue="Component"],
div[textvalue="Pattern"] {
    --e-content-gap: 0.4em;
    color: var(--right-click-menu-item-color);
}

div[textvalue="Component"] .right-click-menu__item-label::before,
div[textvalue="Pattern"] .right-click-menu__item-label::before {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--right-click-menu-icon);
    -webkit-mask-image: var(--right-click-menu-icon);
    background: var(--right-click-menu-item-color);
}

div[textvalue="Component"] {
    --right-click-menu-item-color: var(--e-component);
    --right-click-menu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIGNsYXNzPSJldGNoLWljb24gaWNvbmlmeSBpY29uaWZ5LS1ldGNoIiB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0zLjc2Nzc3IDQuOTc0ODVMMC43NSA3Ljk5MjYzTDMuNzY3NzcgMTEuMDEwNEw2Ljc4NTU1IDcuOTkyNjNMMy43Njc3NyA0Ljk3NDg1WiIgZmlsbD0idHJhbnNwYXJlbnQiIHN0cm9rZT0iY3VycmVudENvbG9yIj48L3BhdGg+PHBhdGggZD0iTTcuOTkyNjYgMC43NUw0Ljk3NDg4IDMuNzY3NzdMNy45OTI2NiA2Ljc4NTU1TDExLjAxMDQgMy43Njc3N0w3Ljk5MjY2IDAuNzVaIiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNMTIuMjE3NSA0Ljk3NDg1TDkuMTk5NzcgNy45OTI2M0wxMi4yMTc1IDExLjAxMDRMMTUuMjM1MyA3Ljk5MjYzTDEyLjIxNzUgNC45NzQ4NVoiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2U9ImN1cnJlbnRDb2xvciI+PC9wYXRoPjxwYXRoIGQ9Ik03Ljk5MjY2IDkuMTk5NzFMNC45NzQ4OCAxMi4yMTc1TDcuOTkyNjYgMTUuMjM1M0wxMS4wMTA0IDEyLjIxNzVMNy45OTI2NiA5LjE5OTcxWiIgZmlsbD0idHJhbnNwYXJlbnQiIHN0cm9rZT0iY3VycmVudENvbG9yIj48L3BhdGg+PC9zdmc+");
}

div[textvalue="Pattern"] {
    --right-click-menu-item-color: #f7863a;
    --right-click-menu-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIGNsYXNzPSJldGNoLWljb24gaWNvbmlmeSBpY29uaWZ5LS1odWdlaWNvbnMtc3Ryb2tlIiB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBkPSJNMTEuOTk4IDEwTDIwLjk5OCA2TDExLjk5OCAyTDIuOTk4MDUgNkwxMS45OTggMTBaIj48L3BhdGg+CgkJCQkJPHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIGZpbGw9Im5vbmUiIGQ9Ik0xNi40OTggNEw3LjQ5ODA1IDgiPjwvcGF0aD4KCQkJCQk8cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgZD0iTTMuMDAxOTUgNlYxOEwxMS45OTggMjJNMTEuOTk4IDIyTDIxLjAwMiAxOFY2LjAxMzU3TTExLjk5OCAyMlYxMCI+PC9wYXRoPgoJCQkJCTxwYXRoIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBkPSJNNS45OTgwNSAxMUw4LjQ5ODA1IDEyIj48L3BhdGg+PC9zdmc+");
}

/* Content Hub */
.content-hub__content .datagrid-row:not(.datagrid-footer) .etch-builder-button {
    border-radius: 4px;
    border: 1px solid color-mix(in oklch, white 10%, transparent) !important;
    background-color: color-mix(in oklch, white 10%, transparent) !important;
    height: calc(var(--e-icon-padding) * 3 + var(--e-icon-size-l));
    width: calc(var(--e-icon-padding) * 3 + var(--e-icon-size-l));
}

/* Delete Button in Content Hub */
.content-hub__content .datagrid-row:not(.datagrid-footer) .datagrid-cell:nth-of-type(7) .etch-builder-button:nth-of-type(1){
    order: 99;
    margin-left: 16px;
    border: 1px solid color-mix(in oklch, red 40%, transparent) !important;
    background-color: color-mix(in oklch, red 40%, transparent) !important;
}

/* Mini GUI Active Styles */
.etch-css-toolbar-toggle--active {
    --etch-css-toolbar-icon: var(--e-primary);
    background: color-mix(in oklch, var(--e-primary) 10%, transparent) !important;
}