@charset "utf-8";
@import "~bulma/sass/utilities/initial-variables.sass";

$body-family: "Roboto", sans-serif;
$body-background-color: var(--body-background-color);

$scheme-main: var(--scheme-main);
$scheme-main-bis: var(--scheme-main-bis);
$scheme-main-ter: var(--scheme-main-ter);

$border: var(--border-color);
$border-hover: var(--border-hover-color);

$menu-item-active-background-color: var(--menu-item-active-background-color);
$menu-item-color: var(--menu-item-color);
$menu-item-hover-background-color: var(--menu-item-hover-background-color);
$menu-item-hover-color: var(--menu-item-hover-color);

$text-strong: var(--text-strong-color);
$text: var(--text-color);

$panel-heading-background-color: var(--panel-heading-background-color);
$panel-heading-color: var(--panel-heading-color);

$link: $turquoise;
$link-active: $grey-dark;

@import "~bulma";
@import "../node_modules/splitpanes/dist/splitpanes.css";
@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_switch";

html {
  --scheme-main: #{$black};
  --scheme-main-bis: #{$black-bis};
  --scheme-main-ter: #{$black-ter};

  --border-color: #{$grey-darker};
  --border-hover-color: var(--secondary-color);
  --logo-color: var(--secondary-color);

  --primary-color: #{$turquoise};
  --secondary-color: #{$yellow};

  --body-background-color: #{$black-bis};

  --menu-item-active-background-color: var(--primary-color);
  --menu-item-color: hsl(0, 6%, 87%);
  --menu-item-hover-background-color: #{$white-ter};
  --menu-item-hover-color: #{$black-ter};

  --panel-heading-background-color: var(--secondary-color);
  --panel-heading-color: var(--scheme-main-bis);

  --text-strong-color: #{$grey-lightest};
  --text-color: #{$grey-lighter};
}

[data-theme="light"] {
  --scheme-main: #{$white};
  --scheme-main-bis: #{$white-bis};
  --scheme-main-ter: #{$white-ter};

  --border-color: #{$grey-lighter};
  --border-hover-color: var(--secondary-color);
  --logo-color: #{$grey-darker};

  --primary-color: #{$turquoise};
  --secondary-color: #d8f0ca;

  --body-background-color: #{$white-bis};
  --body-color: #{$grey-darker};

  --menu-item-color: #{$grey-dark};
  --menu-item-hover-background-color: #eee8e7;
  --menu-item-hover-color: #{black-ter};

  --panel-heading-background-color: var(--secondary-color);
  --panel-heading-color: var(--text-strong-color);

  --text-strong-color: #{$grey-dark};
  --text-color: #{$grey-darker};
}

html {
  overflow-x: unset;
  overflow-y: unset;
  scroll-snap-type: y proximity;
}

html.has-custom-scrollbars {
  ::-webkit-scrollbar {
    width: 8px;
    display: content;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.33);
    outline: 1px solid slategrey;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: #777;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-track:hover {
    background-color: rgba(64, 64, 64, 0.33);
  }

  section main {
    scrollbar-color: #353535 transparent;
    scrollbar-width: thin;
  }
}

.is-settings-control {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-color: transparent;
  &:hover {
    border-color: var(--border-hover-color) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
  }

  &:focus {
    box-shadow: none !important;
    color: unset;
    border-color: transparent;
  }
}