@forward "src/main";
@forward "src/navbar";
@forward "src/now_playing";
@forward "src/right_sidebar";
@forward "src/top_bar";

:root {

  // Spicetify doesnt fully support light-sets yet, so we have to manually set the colors for the light theme
  .encore-dark-theme .encore-inverted-light-set {
    --background-highlight: var(--spice-overlay2) !important;
    --background-press: var(--spice-subtext) !important;
  }

  // Inputs / Icons
  .x-filterBox-searchIcon {
    color: var(--spice-subtext);
  }

  .x-filterBox-filterInput {
    background-color: var(--spice-surface0);
    color: var(--spice-subtext);
  }

  .main-dropDown-dropDown {
    color: var(--spice-text);
    background-color: var(--spice-surface0);

    &:disabled {
      color: var(--spice-button-disabled);
    }
  }

  .x-toggle-indicatorWrapper {
    background-color: var(--spice-surface0);

    .x-toggle-indicator {
      background-color: var(--spice-text);
    }
  }

  input:checked~.x-toggle-indicatorWrapper,
  input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
    background-color: var(--spice-surface1);
  }

  input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
    background-color: var(--spice-overlay0);
  }

  select option:checked {
    color: var(--spice-text);
    font-weight: bold;
  }

  .TypeElement-mesto-type {
    color: var(--spice-subtext) !important;
  }

  .main-trackList-playingIcon {
    background-size: cover;
    padding-left: 100%;
    background-image: var(--spice-equalizer);
  }

  .view-homeShortcutsGrid-equaliser {
    background-image: var(--spice-equalizer);
    background-size: cover;
    padding-left: 35%;
  }

  // Scrollbars
  .os-scrollbar-track,
  ::-webkit-scrollbar {
    width: 0.5em;
  }

  .os-scrollbar-handle,
  ::-webkit-scrollbar-thumb {
    background-color: var(--spice-text) !important;
    border-radius: 6px;
  }

  // Modals
  .GenericModal {
    .main-duplicateTrackModal-container {
      background-color: var(--spice-card);
      color: var(--spice-subtext);

      button {
        &:first-child {
          color: var(--spice-button-active);

          &:hover {
            color: var(--spice-notification-error);
          }
        }

        &:last-child>div {
          background-color: var(--spice-button);
        }
      }
    }
  }

  // Context Menus
  .main-contextMenu-menuItemButton:hover,
  .main-contextMenu-menuItemButton:not([aria-checked="true"]):focus {
    color: var(--spice-subtext);
  }
}