/* Dark skin. */
.css-variables {

    /*
      Styling is only supported using the following CSS variables.
      They will be maintained in a backwards-compatible manner as good as possible.
      It is technically possible to add any valid CSS to this file,
      but there are no guarantees with respect to backwards-compatibility.

      Variable types:
      - variables ending with -color: any valid CSS color
      - variables ending with -border: any value valid for the CSS border shorthand property (e.g. 1px solid red)
      - border-radius: any positive CSS length/percentage
      - variables ending with -opacity: any positive CSS float value (e.g. 0.5)
    */

    /* General */
    --background-color: #202020;
    --text-color: #ddd;
    --error-text-color: #dc4646;
    --error-field-background-color: var(--error-text-color);
    --success-text-color: #46c846;
    --neutral-text-color: #bbb;
    --disabled-text-color: #777;
    --border-radius: 5px;

    /* Buttons */
    --button-icon-color: var(--text-color);
    --button-add-icon-color: var(--success-text-color);
    --button-remove-icon-color: var(--error-text-color);
    --button-text-color: var(--text-color);
    --button-background-color: #333;
    --button-border: 2px solid rgb(70, 70, 70);
    --hovered-button-background-color: #444;
    --hovered-button-border: 2px solid #bbb;
    --active-button-background-color: #555;
    --active-button-border: 2px solid #ddd;
    --disabled-button-opacity: 0.4;
    --disabled-button-background-color: var(--button-background-color);
    --disabled-button-border: var(--button-border);
    --highlighted-button-background-color: #242;
    --highlighted-button-border-color: #4b4;
    --highlighted-button-border: 2px solid var(--highlighted-button-border-color);

    /* Links */
    --link-color: #77f;

    /* Boxes */
    --box-border-width: 2px;
    --box-border-color: rgb(70, 70, 70);
    --box-border: var(--box-border-width) solid var(--box-border-color);

    /* Inputs */
    --input-border: 2px solid rgba(70, 70, 70, 0.5);
    --focused-input-border: 2px solid var(--success-text-color);

    /* Filter plot */
    --axes-color: #555;
    --gain-color: #1E90FF;
    --phase-color: #FF4500;
    --impulse-color: #32CD32;
    --groupdelay-color: #ffa010;

    /* Mixer matrix */
    --muted-cell-color: #909090;
    --normal-cell-color: #70ff70;
    --inverted-cell-color: #9090ff;
    --error-cell-color: #dc4646;

    /* Pipeline plot */
    --arrow-colors: #1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf;
    --frame-background-color: #333;
    --block-background-color: rgb(200, 200, 200);
    --disabled-block-background-color: rgb(120, 120, 120);
    --block-text-color: rgb(16, 10, 90);
    --disabled-block-text-color: rgb(75, 75, 75);
}

/*
    Bright skin (black/white)
    Rename to .css-variables to enable
*/
.css-variables-disabled {

    /* General */
    --background-color: white;
    --text-color: black;
    --error-text-color: #f00;
    --error-field-background-color: var(--error-text-color);
    --success-text-color: #0c0;
    --neutral-text-color: #bbb;
    --border-radius: 5px;

    /* Buttons */
    --button-icon-color: var(--text-color);
    --button-add-icon-color: var(--success-text-color);
    --button-remove-icon-color: var(--error-text-color);
    --button-text-color: var(--text-color);
    --button-background-color: #f3f3f3;
    --button-border: 1px inset #9090B0;
    --hovered-button-background-color: #ddd;
    --hovered-button-border: var(--button-border);
    --active-button-background-color: #aaa;
    --active-button-border: var(--button-border);
    --disabled-button-opacity: 1.0;
    --disabled-button-background-color: #aaa;
    --disabled-button-border: var(--button-border);
    --highlighted-button-background-color: #cfc;
    --highlighted-button-border-color: var(--button-border);
    --highlighted-button-border: 2px solid var(--highlighted-button-border-color);

    /* Links */
    --link-color: #44f;

    /* Boxes */
    --box-border-width: 1px;
    --box-border-color: #9090B0;
    --box-border: var(--box-border-width) solid var(--box-border-color);

    /* Inputs */
    --input-border: 1px solid #9090B0;
    --focused-input-border: 2px solid #9292f6;

    /* Filter plot */
    --axes-color: #555;
    --gain-color: rgba(0,0,220,1);
    --phase-color: rgba(0,220,0,1);
    --impulse-color: rgba(220,0,0,1);

    /* Pipeline plot */
    --arrow-colors: #1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf;
    --frame-background-color: rgb(180, 180, 180);
    --block-background-color: rgb(233, 233, 233);
    --disabled-block-background-color: rgb(100, 100, 100);
    --block-text-color: rgb(16, 10, 90);
    --disabled-block-text-color: rgb(0, 0, 0);
}