/*
 * SPDX-FileCopyrightText: © 2018-2023 Alexandros Theodotou <alex@zrythm.org>
 * SPDX-FileCopyrightText: © 2024 Miró Allard <miro.allard@pm.me>
 * SPDX-License-Identifier: LicenseRef-ZrythmLicense
 */

@import '_palette';
@import '_drawing';

/* override adwaita colors */
$accent_color: $dark_orange;
$accent_bg_color: $bright_orange;
@define-color accent_color #{$accent_color};
@define-color accent_bg_color #{$accent_bg_color};

/* taken from libadwaita */
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$focus_transition: outline-color 200ms $ease-out-quad,
                   outline-width 200ms $ease-out-quad,
                   outline-offset 200ms $ease-out-quad;
$focus_border_color:  gtkalpha($accent_color, 0.5);

panelresizer > widget > separator,
paned > separator
{
  &:hover {
    color: $hover_color;
    //background-color: gtkalpha(white, 0.08);
  }
  min-height: 4px;
  min-width: 4px;
}

.plugin-browser separator,
.file-browser separator
{
  min-height: 6px;
}

entry selection,
:not(.sourceview) > text selection
{
  color: $bg_lighter_variant1;
  background-color: $z_yellow;
}

treeview.view:hover,
listview row:hover,
columnview row:hover,
list row:hover
{
  background-color: $hover_color;
}

progressbar > trough > progress {
  background-image: linear-gradient(90deg, $z_yellow, $z_purple);
}

progressbar > text {
  padding-bottom: 8px;
}

treeview.view:selected,
listview row:selected,
columnview row:selected,
list row:selected
{
  background-color: $z_purple;
}

/* notebook page background */
notebook stack
{
  background-color: $bg_color;
}

tracklist,
ruler,
piano-roll-labels,
window,
filechooser #pathbarbox,
paned {
  background-color: $bg_dark_variant1;
}

.main-window-header,
left-dock-edge notebook header,
right-dock-edge notebook header,
bot-dock-edge notebook header,
notebook header,
center-dock-bot-box,
center-dock-bot-box .toolbar,
tracklist-header,
top-dock-edge,
top-dock-edge .toolbar,
top-bar,
top-bar .toolbar,
bot-bar,
bot-bar .toolbar,
assistant,
buttonbox,
timeline-selection-info,
.timeline-toolbar,
piano-roll-selection-info,
piano-roll-toolbar,
.plugin-browser .toolbar,
.file-browser .toolbar,
bot-dock-edge .toolbar,
bot-dock-edge .toolbar > stack,
dialog
{
  background-color: $bg_dark_variant2;
}

.header tabs,
.header header,
.header .toolbar,
.header > box,
menubar
{
  background-color: $bg_darker_variant2;
}

.linked > button {
  margin-left: 0px;
}

button {
  /* override button size from theme */
  min-width: 4px;
  min-height: 4px;

  &.toggle:hover,
  &.popup:hover,
  &:not(.close):hover,
  &.flat:hover,
  &.text-button:hover {
    background-color: $bg_lighter_variant1;
  }

  &:not(.toggle):not(.close):active,
  &.flat:not(.toggle):active,
  &:not(.record-button):not(.solo-button).toggle:active,
  &.text-button:active {
    background-color: $accent_bg_color;
  }

  &:not(.record-button):not(.solo-button):checked {
    background-color: $accent_color;
  }

  &.toggle {
    &.record-button {
      &:checked {
        background-color: #ED2939;
      }
      &:active {
        background-color: #FF2400;
      }
    }
    &.solo-button {
      &:checked {
        background-color: $darkish_green;
      }
      &:active {
        background-color: $matcha;
      }
    }
  }

  &.channel-slot-activate-btn {
    border-radius: 100px;
    min-height: 0px;
    min-width: 0px;
    padding: 4px;
    margin-left: 4px;
    background-color: rgba(0.3, 0.3, 0.3, 1.0);
    border: 1px;
    border-color: gtkalpha(black,0.4);
    border-style: solid;
    &:checked {
      background-color: $matcha;
    }
    &:active {
      background-color: $darkish_green;
    }
  }
}

arranger-bg,
treeview.view,
listview.view,
columnview.view,
list row,
timeline-minimap-bg,
list
{
  background-color: $bg_darker_variant1;
}

track-grid:selected,
channel:selected,
region:selected,
chord:selected,
marker:selected,
scale-object:selected,
midi-note:selected
velocity:selected,
automation-point:selected
{
  background-color: $selection_color;
}

filechooser button:checked,
filechooser button:active
{
  border-color: $selection_color;
}

track-grid:hover,
chord:hover,
channel-slot:hover:not(:selected),
channel-send:hover:not(:selected),
{
  background-color: $hover_color;
}

.inspector expander-box,
.inspector two-col-expander-box,
modulator-view two-col-expander-box
{
  margin: 4px;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  /* FIXME use predefined colors */
  border-color: #555555;

  button {
    &.toggle,
    &.popup,
    &:not(.flat) {
      background-color: $bg_light_variant2;
    }

    &:hover {
      background-color: $bg_lighter_variant1;
    }
  }
}

/* curve the bottom edges of the fader section
 * in the inspector */
.inspector .fader-controls-expander buttonbox
{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* make mono switch smaller */
.track-input-expander button.toggle
{
  padding-left: 4px;
  padding-right: 4px;
}

.inspector expander-box >button,
.inspector two-col-expander-box>button
{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

channel {
  button.flat {
    padding-left: 3px;
    padding-right: 3px;
  }

  expander-box {
    /*margin: 5px;*/
    border-style: none;
    border-width: 2px;
    border-radius: 8px;
    /* FIXME use predefined colors */
    border-color: #BBBBBB;

    >button {
      padding: 4px 6px 4px 6px;
    }
  }
}

.piano_roll_key_box,
.chord_key
{
  border-style: solid;
  border-bottom-width: 1px;
  border-color: gtkalpha(grey, 0.3);
}

/* blend with header box on the right */
.header notebook {
  border-right: 0px;
}

/* make the header box on the right match the
 * style of the notebook */
.header > box {
  border-top: 1px;
  border-bottom: 1px;
  border-right: 1px;
  border-style: solid;
  /* from matcha theme */
  border-color: rgba(0, 0, 0, 0.2);

  > box {
    border-top: 1px;
    border-style: solid;
    border-color: #1b1b1b;
  }
}

.splash label,
statusbar {
  font-size: 10.5pt;
}

/* use .spacer instead in toolbars */
.thick-separator
{
  min-height: 6px;
  min-width: 6px;
}

track-lane,
automation-lane
{
  border-style: solid;
  border-top-width: 2px;
  border-color: gtkalpha(grey, 0.3);
}

.section_heading,
.port-group-lbl
{
  font-weight: bold;
  font-size: small;
}

.channel_label_smaller
{
  font-size: smaller;
}

/* statckswitcher in the inspector */
stackswitcher button image
{
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
}

textview {
  font-family: Monospace;
  font-size: 11pt;
}

/* button without padding */
.mini-button
{
  padding: 0px;
}

.small-button
{
  padding: 3px;
}

.left-of-ruler-box button
{
  min-width: 24px;
}

.inspector_label
{
  font-size: small;
}

/* arrow button */
.button-with-menu button
{
  padding: 0;
  border-width: 0;
  min-height: 24px;
}

/* make dock tab height */
left-dock-edge notebook tab,
right-dock-edge notebook tab
{
  min-height: 24px;
}

/* make snap grid popover buttons small */
popover.snap-grid-popover button.note-type {
  padding: 0px 4px 0px 4px;
}

/* to be used on currently selected part of the UI
 * (e.g., timeline, tracklist, etc.) */
.selected-element {
  border: 2px solid gtkalpha(#ccc, 0.4);
  padding: 1px;
  border-radius: 3px;
}

.selectable-element {
  padding: 3px;
}

label.small-vertical-lbl {
  font-family: sans-serif;
  font-size: 6pt;
}

/* this is used in adwaita preferences window */
preferencesgroup,
row {
  .header .title,
  .header > box,
  .boxed-list box {
    background-color: transparent;
    border-color: transparent;
  }
}

/* make channel tint look better */
channel button:not(:checked),
folder-channel button:not(:checked) {
  background-color: transparent;
}

channel button:hover,
channel menubutton:hover,
channel button.toggle:hover,
folder-channel button:hover,
folder-channel menubutton:hover,
folder-channel button.toggle:hover {
  background-color: $hover_color;
}

viewswitcher stack,
event-viewer stack,
dropdown stack,
dropdown stack:hover,
dropdown stack row,
dropdown stack row:hover,
row.combo > box.header > box > listview,
row.combo > box.header > box > listview > row {
  background-color: transparent;
}

/* context menus */
popover {
  accelerator {
    font-size: small;
    color: $bright_orange;
  }
}

/* Used on toolbar children that use a box layout
 * to get uniform spacing between the children */
.toolbar-child-box {
  border-spacing: 6px;
}

channel-send,
channel-slot {
  font-size: x-small;

  &:not(.empty) {
    font-weight: bold;
  }

  &.empty {
    font-style: italic;
    color: $dim_fg;
  }

  @include focus-ring();
}

channel-slot {
  border-radius: 6px;
  margin: 1px;

  &.empty {
    background-color: gtkalpha($bg_darker_variant2, 0.9)
  }

  &:not(.empty) {
    &.disabled {
      background-color: $light_variant1;
      &:checked {
        background-color: $light_variant2;
      }
    }
    &:not(.disabled) {
      background-color: $darkish_green;
      &:checked {
        background-color: $bright_green;
      }
    }

    &:selected {
      border-color: $z_yellow;
      border-style: solid;
      border-width: 2px;
    }
  }
}

volume {
  padding: 4px;
}

fader-buttons button {
  padding: 3px;
}

/* add focus right on any focusable widget */
* {
  @include focus-ring();
}

.signal-preview {
  border-color: gtkalpha(white,0.2);
  border-style: solid;
  border-radius: 4px;
  border-width: 1px;
}

route-target-selector button.toggle {
  padding: 2px 3px 2px 6px;

  label {
    font-size: 11px;
  }
}

/* fix shortcut window page buttons being tiny */
shortcuts-section > box > stackswitcher > button {
  padding: 8px;
  min-width: 16px;
}
