[data-global-palette=lab-cerulean] {
  --lab-config-color-primary-rgb: 4, 68, 196;
  --lab-config-color-primary-light-rgb: 4, 68, 196;
  --lab-config-color-primary-hover: #0444c4;
  --lab-config-color-primary-active: #043cad;
  --lab-config-bg-app-rgb: 248, 250, 254;
  --lab-config-bg-header: #e1eafc;
  --lab-config-color-sticky-rgb: 235, 241, 253;
}

[data-global-palette=lab-navy] {
  --lab-config-color-primary-rgb: 31, 113, 173;
  --lab-config-color-primary-light-rgb: 31, 113, 173;
  --lab-config-color-primary-hover: #1f71ad;
  --lab-config-color-primary-active: #1f71ad;
  --lab-config-bg-app-rgb: 249, 251, 254;
  --lab-config-bg-header: #e6eefb;
  --lab-config-color-sticky-rgb: 239, 244, 253;
}

[data-global-palette=lab-default] {
  --lab-config-color-primary-rgb: 31, 157, 173;
  --lab-config-color-primary-light-rgb: 31, 157, 173;
  --lab-config-color-primary-hover: #1f9dad;
  --lab-config-color-primary-active: #1f9dad;
  --lab-config-bg-app-rgb: 249, 247, 253;
  --lab-config-bg-header: #e8e0f7;
  --lab-config-color-sticky-rgb: 240, 235, 250;
  --lab-config-color-primary-light-hover: rgba(var(--lab-config-color-primary-rgb), .2);
  --lab-config-color-primary-light-active: rgba(var(--lab-config-color-primary-rgb), .25);
  --lab-config-shadow-primary-light: rgba(var(--lab-config-color-primary-rgb), .4);
  --lab-config-bg-item-hover: rgba(var(--lab-config-color-primary-rgb), .08);
}

[data-global-palette=lab-purple] {
  --lab-config-color-primary-rgb: 151, 71, 162;
  --lab-config-color-primary-light-rgb: 151, 71, 162;
  --lab-config-color-primary-hover: #9747a2;
  --lab-config-color-primary-active: #9747a2;
  --lab-config-bg-app-rgb: 250, 247, 255;
  --lab-config-bg-header: #ebe0ff;
  --lab-config-color-sticky-rgb: 242, 235, 255;
  --lab-config-color-primary-light-hover: rgba(var(--lab-config-color-primary-rgb), .2);
  --lab-config-color-primary-light-active: rgba(var(--lab-config-color-primary-rgb), .25);
  --lab-config-shadow-primary-light: rgba(var(--lab-config-color-primary-rgb), .4);
  --lab-config-bg-item-hover: rgba(var(--lab-config-color-primary-rgb), .08);
}

/*[data-global-palette=teal] {*/
/*  --lab-config-color-primary-rgb: 16, 133, 127;*/
/*  --lab-config-color-primary-light-rgb: 207, 231, 229;*/
/*  --lab-config-color-primary-hover: #0e716c;*/
/*  --lab-config-color-primary-active: #0c645f;*/
/*  --lab-config-bg-app-rgb: 248, 251, 251;*/
/*  --lab-config-bg-header: #e2f0f0;*/
/*  --lab-config-color-sticky-rgb: 236, 245, 245;*/
/*}*/

[data-global-palette=lab-green] {
  --lab-config-color-primary-rgb: 31, 160, 111;
  --lab-config-color-primary-light-rgb: 31, 160, 111;
  --lab-config-color-primary-hover: #1fa06f;
  --lab-config-color-primary-active: #1fa06f;
  --lab-config-bg-app-rgb: 247, 251, 250;
  --lab-config-bg-header: #e0f1ec;
  --lab-config-color-sticky-rgb: 235, 245, 242;
}

/*[data-global-palette=red] {*/
/*  --lab-config-color-primary-rgb: 216, 0, 47;*/
/*  --lab-config-color-primary-light-rgb: 247, 204, 213;*/
/*  --lab-config-color-primary-hover: #b80028;*/
/*  --lab-config-color-primary-active: #a20023;*/
/*  --lab-config-bg-app-rgb: 254, 247, 249;*/
/*  --lab-config-bg-header: #fae0e6;*/
/*  --lab-config-color-sticky-rgb: 252, 235, 238;*/
/*}*/

[data-global-palette=lab-orange] {
  --lab-config-color-primary-rgb: 255, 112, 36;
  --lab-config-color-primary-light-rgb: 255, 112, 36;
  --lab-config-color-primary-hover: #ff7024;
  --lab-config-color-primary-active: #ff7024;
  --lab-config-bg-app-rgb: 255, 250, 248;
  --lab-config-bg-header: #fdebe4;
  --lab-config-color-sticky-rgb: 254, 242, 237;
}

[data-global-palette=lab-yellow] {
  --lab-config-color-primary-rgb: 247, 197, 0;
  --lab-config-color-primary-light-rgb: 247, 197, 0;
  --lab-config-color-primary-hover: #f7c500;
  --lab-config-color-primary-active: #f7c500;
  --lab-config-bg-app-rgb: 253, 251, 247;
  --lab-config-bg-header: #f8f1e0;
  --lab-config-color-sticky-rgb: 250, 246, 235;
}

[data-global-palette=lab-pink] {
  --lab-config-color-primary-rgb: 232, 55, 126;
  --lab-config-color-primary-light-rgb: 232, 55, 126;
  --lab-config-color-primary-hover: #e8377e;
  --lab-config-color-primary-active: #e8377e;
  --lab-config-bg-app-rgb: 254, 249, 251;
  --lab-config-bg-header: #fce6ef;
  --lab-config-color-sticky-rgb: 253, 239, 244;
}

[data-global-palette=lab-dark-turquoise] {
  --lab-config-color-primary-rgb: 0, 194, 219;
  --lab-config-color-primary-light-rgb: 0, 194, 219;
  --lab-config-color-primary-hover: #00C2DB;
  --lab-config-color-primary-active: #00C2DB; 
  --lab-config-bg-app-rgb: 245, 253, 254;
  --lab-config-bg-header: #fce6ef;
  --lab-config-color-sticky-rgb: 230, 251, 254;
}

[data-global-palette=lab-tin] {
  --lab-config-color-primary-rgb: 145, 145, 145;
  --lab-config-color-primary-light-rgb: 145, 145, 145;
  --lab-config-color-primary-hover: #919191;
  --lab-config-color-primary-active: #919191;
  --lab-config-bg-app-rgb: 255, 246, 246;
  --lab-config-bg-header: #fce6ef;
  --lab-config-color-sticky-rgb: 217, 217, 217;
}

[data-global-palette=lab-mahogany] {
  --lab-config-color-primary-rgb: 194, 58, 0;
  --lab-config-color-primary-light-rgb: 194, 58, 0;
  --lab-config-color-primary-hover: #C23A00;
  --lab-config-color-primary-active: #C23A00;
  --lab-config-bg-app-rgb: 255, 250, 247;
  --lab-config-bg-header: #fce6ef;
  --lab-config-color-sticky-rgb: 255, 239, 232;
}

[data-global-palette=lab-spicy-sweetcorn] {
  --lab-config-color-primary-rgb: 247, 170, 0;
  --lab-config-color-primary-light-rgb: 247, 170, 0;
  --lab-config-color-primary-hover: #f7aa00;
  --lab-config-color-primary-active: #f7aa00;
  --lab-config-bg-app-rgb: 252, 249, 242;
  --lab-config-bg-header: #fce6ef;
  --lab-config-color-sticky-rgb: 253, 245, 228;
}

[data-global-palette] {
  --lab-config-color-primary: rgb(var(--lab-config-color-primary-rgb));
  --lab-config-color-primary-light: rgba(var(--lab-config-color-primary-rgb), .15);
  --lab-config-bg-app: rgb(var(--lab-config-bg-app-rgb));
  --lab-config-bg-item-hover: rgba(var(--lab-config-color-primary-rgb), .1);
  --lab-config-color-primary-light-hover: rgba(var(--lab-config-color-primary-rgb), .2);
  --lab-config-color-primary-light-active: rgba(var(--lab-config-color-primary-rgb), .3);
  --lab-config-shadow-primary-light: rgba(var(--lab-config-color-primary-rgb), .45);
}

:root {
  /*--lab-config-color-primary-rgb: 50, 117, 224;*/
  --lab-config-spacing-xs: .5rem;
  --lab-config-spacing-m: 1rem;
  --lab-config-bg-input: #fff;
  --lab-config-bg-layer: #fff;
  --lab-config-bg-layer2: #edeff5;
  --lab-config-bg-layer3: #fff;
  --lab-config-bg-layer4: #e2e5ec;
  --lab-config-border-color: #d4d4d8;
  --lab-config-border-xxs: .125rem;
  --lab-config-border-xs: .25rem;
  --lab-config-border-s: .375rem;
  --lab-config-border-m: .5rem;
  --lab-config-border-l: .75rem;
  --lab-config-border-xl: 1rem;
  --lab-config-color-contextual-text: #eee;
  --lab-config-color-text: #222330;
  --lab-config-color-contextual: var(--lab-config-color-text);
}

.toolbar .toolbar-bar a.toolbar-icon.toolbar-icon-wis-lab-config-admin-config:before {
  -webkit-mask-image: url(../images/flask-regular.svg);
  mask-image: url(../images/flask-regular.svg);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--lab-config-spacing-xs);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name {
  position: relative;
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input {
  cursor: pointer;
  width: 32px;
  height: 32px;
  top: var(--lab-config-spacing-m);
  border-color: transparent;
}

[dir="ltr"] [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input {
  margin-right: var(--lab-config-spacing-xs);
}

[dir="rtl"] [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input {
  margin-left: var(--lab-config-spacing-xs);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input {
  background-color: var(--lab-config-color-primary);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:hover {
  box-shadow: none;
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:hover, [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:focus, [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:focus:hover, [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:checked {
  border-color: var(--lab-config-color-primary);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:focus:checked, [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:focus, [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:checked {
  background-color: var(--lab-config-color-primary);
  box-shadow: inset 0 0 0 2px var(--lab-config-bg-layer), inset 0 0 0 4px var(--lab-config-color-primary);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input[data-global-palette=custom] {
  background-color: #fff;
  background-image: url(../../media/settings/custom-color.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  border-color: var(--lab-config-border-color);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input[data-global-palette=custom]:checked {
  background-color: #fff;
  border-color: var(--lab-config-border-color);
  border-width: 1px;
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name .form-item__label {
  display: none;
  visibility: hidden;
  z-index: 1;
  position: absolute;
  top: 100%;
  padding: var(--lab-config-spacing-xs);
  color: var(--lab-config-color-contextual-text);
  background: var(--lab-config-color-contextual);
  border-radius: var(--lab-config-border-xs);
}

[dir="ltr"] [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name .form-item__label {
  left: -10px;
  transform: translateX(-50%);
}

[dir="rtl"] [data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name .form-item__label {
  right: -10px;
  transform: translateX(50%);
}

[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name:hover .form-item__label,
[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:active ~ .form-item__label,
[data-drupal-selector=edit-plugins-lab-global-settings-palette-name] .form-radios .form-item--plugins-lab-global-settings-palette-name input:focus ~ .form-item__label {
  display: block;
  visibility: visible;
}

[data-drupal-selector=edit-preset-accent-color] .form-radios .form-item--preset-accent-color input {
  background-color: var(--lab-config-color-primary);
}