.ab--theme-dark {
  --ab-theme-loaded: dark;

  --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */

  --ab-color-defaultbackground: #3e444c;
  --ab-color-text-on-defaultbackground: #e2e2e2;

  --ab-color-primary: #262d2f;
  --ab-color-primarylight: #3d3e3f;
  --ab-color-primarydark: #1c2021;
  --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */

  --ab-color-shadow: rgb(255 255 255 / 0.45);
  --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);

  --ab-dashboard__border: #555;
  --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;

  --ab-gridheader--filtered__background: var(--ab-color-defaultbackground);

  --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
  --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);

  input[type='number'].ab-Input::-webkit-outer-spin-button,
  input[type='number'].ab-Input::-webkit-inner-spin-button {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
      no-repeat center center;
  }
}

/*
The following are only redefined here so that the DARK theme in Storybook
can be previewed correctly as that relies on an element (not the document element)
to have the class ab--theme-dark.

For our production release those are not needed and could be removed
as our dark theme is anyways applied on the document element.

*/
.ab--theme-dark {
  --ab-color-inputcolor: var(--ab-color-text-on-primary);
  --ab-cmp-input__color: var(--ab-color-inputcolor);
  --ab-cmp-input__background: var(--ab-color-defaultbackground);
  --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
  --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
  --ab-cmp-simple-button--outlined__background: var(--ab-color-defaultbackground);
}
