@import "./colors";

$body-size: 14px;

$family-sans-serif: "Roboto Flex Variable", sans-serif;
$family-sans-serif-icon: "Roboto Flex Variable", sans-serif, "arcticons", "fa6-brands",
  "fa6-regular", "fa6-solid", "fluent-emoji-high-contrast", "mdi";
$family-monospace: "Roboto Mono Variable", monospace;

$box-radius: 4px;
$box-shadow: none;
$box-padding: 1.25rem 0;

$card-shadow: none;
$danger-light: hsl(347, 90%, 96%);

$switch-focus: none;

$yellow: $amber-500;

@import "bulma/sass/utilities/_all.sass";
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";

$menu-item-hover-background-color: $link-light;
$menu-item-active-color: $link-dark;
$menu-item-active-background-color: $link-light;

$editor-full-height: calc(100vh - 45.5px - 7px - 15.75px - 21px - 57.75px - 10.5px - 10.5px);

@import "bulma/bulma.sass";
@import "bulma-switch/src/sass/index.sass";
@import "@cityssm/bulma-sticky-table/sticky-table";

$backgroundColor: $white;
$borderColor: none;
$textSize: 1rem;
$headerBackgroundColor: $white;
$headerTextColor: $grey-dark;
$headerBorderColor: rgba($grey-lightest, 1);
$headerSeparatorColor: rgba($grey-light, 0.5);
$headerMargin: 0.2857rem;
$sortArrowActive: $black;
$sortArrowInactive: $grey-light;
$rowBackgroundColor: $white;
$rowAltBackgroundColor: $white;
$rowBorderColor: rgba($grey-lightest, 0.5);
$rowTextColor: $grey-dark;
$rowHoverBackground: $white-bis;
$rowSelectedBackground: #9abcea;
$rowSelectedBackgroundHover: #769bcc;
$editBoxColor: #1d68cd;
$errorColor: #dd0000;
$footerBackgroundColor: #fff;
$footerTextColor: #555;
$footerBorderColor: #aaa;
$footerSeparatorColor: #999;
$footerActiveColor: #d00;

@import "tabulator-tables/src/scss/themes/tabulator_simple.scss";

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  white-space: normal;
}

.tabulator {
  border-radius: $radius;
}

.tabulator-col {
  padding: 0.5rem;
}

// override message style

.message {
  @each $name, $components in $message-colors {
    $color: nth($components, 1);
    $color-invert: nth($components, 2);
    $color-light: null;
    $color-dark: null;

    @if length($components) >= 3 {
      $color-light: nth($components, 3);
      @if length($components) >= 4 {
        $color-dark: nth($components, 4);
      } @else {
        $color-luminance: colorLuminance($color);
        $darken-percentage: $color-luminance * 70%;
        $desaturate-percentage: $color-luminance * 30%;
        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
      }
    } @else {
      $color-lightning: max((100% - lightness($color)) - 2%, 0%);
      $color-light: lighten($color, $color-lightning);
    }

    &.invertable.is-#{$name} {
      background-color: transparent;
      border: 1px solid rgba($color, 0.6);

      .message-header {
        background-color: rgba($color, 0.15);
        color: $black-ter;
      }
      .message-body {
        color: $text;
        background: $white-bis;
        border: none;
      }
    }
  }
}

// daisy UI color override
.du-tabs {
  --rounded-btn: #{$radius};
  background-color: $grey-lightest !important;

  .du-tab {
    color: $grey-dark !important;

    &.du-tab-active {
      background-color: $white !important;
      color: $black-bis !important;
    }
  }
}

.du-menu {
  summary:after {
    color: $link;
  }

  a,
  summary {
    border-radius: $radius-small;
    color: $grey-dark;
  }

  a:hover,
  summary:hover {
    background-color: $white-ter !important;
  }

  a.du-active {
    color: $link !important;
    background-color: $white !important;
    font-weight: bold;
  }
}

.du-range {
  --range-shdw: var(--fallback-bc, oklch(var(--nc) / 1));
}

.modal-background {
  background-color: rgba(0, 0, 0, 0.86);
}

:focus {
  outline: 0;
}

html,
body {
  background: $white-bis;
  background-image: radial-gradient(rgba($grey-light, 0.2) 1px, $white-bis 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

.is-primary-color {
  color: #b388ff;
  font-weight: bold;

  &:hover {
    color: #b388ff;
  }
}

.secondary-link {
  color: $grey-dark;
  &:hover {
    color: $link;
    text-decoration: underline;
  }
}

.tab-journal .table td {
  border: 1px solid rgba($grey-lightest, 0.5);
}

.table.is-light-border tbody {
  td,
  th {
    border-bottom: 1px solid rgba($grey-lightest, 0.5);
  }
}

.table tr.is-sub-header {
  background-color: $white-ter;
}

.table.has-sticky-column tbody tr.is-sub-header th:first-child {
  background-color: $white-ter;
}

code {
  color: $grey-darker;
}

.progress.is-extra-small {
  height: 0.3rem;
}

.inline-text text {
  font-size: 0.857rem;
  font-weight: bold;
}

.is-not-visible {
  visibility: hidden;
}

.is-bordered-bottom {
  border-bottom: 1px solid $grey-lighter;
}

.is-bordered-top {
  border-top: 1px solid $grey-lighter;
}

.is-bordered-right {
  border-right: 1px solid $grey-lighter;
}

.is-bordered-left {
  border-left: 1px solid $grey-lighter;
}

.is-bordered.is-link {
  border: 2px solid $link;
}

svg text {
  font-family: $family-sans-serif-icon;
}

.svg-text-grey-lighter {
  fill: $grey-lighter;
}

.has-background-grey-lightest {
  background-color: $grey-lightest;
}

.svg-text-grey-light {
  fill: $grey-light;
}

.svg-text-shadow {
  text-shadow: 0px 0px 2px $white;
}

.svg-text-grey {
  fill: $grey;
}

.svg-text-black {
  fill: $black;
}

.svg-text-black-ter {
  fill: $black-ter;
}

.svg-text-black-bis {
  fill: $black-bis;
}

.svg-text-grey-darker {
  fill: $grey-darker;
}

.svg-text-grey-dark {
  fill: $grey-dark;
}

.svg-text-success {
  fill: $success;
}

.svg-text-danger {
  fill: $danger;
}

.svg-text-warning-dark {
  fill: $warning-dark;
}

.svg-grey-light {
  stroke: $grey-light;
}

.svg-grey-lighter {
  stroke: $grey-lighter;
}

.svg-grey-lightest {
  stroke: $grey-lightest;
}

.svg-grey {
  stroke: $grey;
}

.svg-grey-dark {
  stroke: $grey-dark;
}

.svg-grey-lighter {
  stroke: $grey-lighter;
}

.is-size-6-5 {
  font-size: 0.85rem !important;
}

.axis {
  font-family: $family-sans-serif-icon;

  &.dark text {
    fill: $grey;
    font-size: 0.857rem;
  }

  &.is-large text {
    font-size: 1.25rem;
  }

  &.link text {
    fill: $link;
    font-size: 0.857rem;
    cursor: pointer;
  }

  text {
    font-size: 0.714rem;
    fill: $grey-light;
  }

  path.domain,
  line {
    fill: none;
    stroke: $grey-lighter;
    shape-rendering: crispEdges;
  }

  &.light-domain {
    path.domain {
      stroke: $grey-lightest;
    }
  }

  .tick line {
    stroke: $white-ter;
    shape-rendering: crispEdges;
  }

  &.y {
    line {
      stroke: $white-bis;
    }

    path.domain {
      display: none;
    }

    &.keep-domain path.domain {
      display: block;
    }
  }
}

.g-arrow path {
  opacity: 0.4;
  stroke: $black !important;
}

.g-arrow path.arrow-head {
  fill: $black !important;
}

.g-arrow.is-light path {
  opacity: 1;
  stroke: $grey-light !important;
  fill: $grey-light !important;
}

.legend-label {
  text-transform: capitalize;
  text-align: center;
  line-height: 1rem;
}

.legend-box.selected {
  background-color: $grey-lightest;
  border-radius: $radius;
}

#d3-salary-timeline .x.axis > g.tick {
  display: none;
}

#d3-salary-timeline .x.axis > g.tick:nth-child(3n-1) {
  display: inline;
}

.box.is-selected {
  box-shadow: $shadow;
}

.box.box-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.box.box-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.box {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.node {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

#d3-allocation-category,
#d3-allocation-value {
  position: relative;
}

.popup-table td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adjustable-input {
  border: none;
  border-bottom: 1px solid $grey-light;
  box-shadow: none;
  width: 80px;
  font-size: 1rem !important;
  margin-left: 5px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 5px;
  height: 1.3rem;
}

#d3-monthly-expense-timeline .cell,
#d3-yearly-expense-timeline .cell {
  cursor: pointer;
}

.zoomable {
  cursor: zoom-in;
}

.weekdays-grid {
  div:first-child {
    border-radius: $radius-small 0 0 $radius-small !important;
  }

  div:last-child {
    border-radius: 0 $radius-small $radius-small 0 !important;
  }

  div {
    padding: 2px 0;
    color: $grey-dark;
    background: $white-ter;
  }
}

.d3-calendar .days,
.d3-calendar .months,
.d3-calendar .weekdays {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  color: $grey-dark;
}

.d3-calendar .weekdays div {
  background: $white-ter;
  display: flex;
  justify-content: center;
  padding: 5px;
  flex: 14.28571%;
  margin: 0.1rem 0;
  align-items: center;
}

.d3-calendar .days .date {
  display: flex;
  justify-content: center;
  flex: 14.28571%;
  margin: 0.1rem 0;
  align-items: center;
}

.d3-calendar .months .month {
  display: flex;
  justify-content: center;
  flex: 33.33%;
  margin: 0.1rem 0;
  align-items: center;
}

// BULMA overrides

.section {
  padding-right: 0;
  padding-left: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.container.is-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.level-item p.title {
  padding: 5px;
  color: $white;
}

nav.level.grid-2 {
  display: grid !important;
  grid-template-columns: [first] 50% [line2] 50%;
  justify-items: start;
  justify-content: unset !important;

  .level-item {
    margin-bottom: 0.75rem;
  }
}

.navbar-item,
.navbar-link {
  &.is-active {
    font-weight: 600;
  }
}

.navbar {
  background-color: $white !important;
  color: rgba(0, 0, 0, 0.7);

  a.navbar-item {
    background-color: $white !important;
  }
}
.cm-editor {
  .cm-gutters {
    background-color: $white-ter;
    color: $grey-light;
    border: none;
    border-top-left-radius: $radius-small;
    border-bottom-left-radius: $radius-small;
  }

  .cm-activeLineGutter {
    background-color: $grey-lightest !important;
    color: $grey-dark;
    font-weight: bold;
  }

  .cm-activeLine {
    background-color: transparent !important;
  }

  .cm-selectionBackground {
    background-color: $grey-lightest !important;
  }

  // hightlight
  .cm-line {
    $hl-yellow: #c99e00;
    $hl-orange: #f5871f;
    $hl-red: #c82829;
    $hl-purple: #8959a8;
    $hl-violet: #6c71c4;
    $hl-blue: #4271ae;
    $hl-cyan: #3e999f;
    $hl-green: #718c00;

    .tok-heading {
      font-weight: bold;
      color: $grey-dark;
    }

    .tok-link {
      text-decoration: underline;
    }

    .tok-number {
      color: $hl-violet;
      font-weight: bold;
    }

    .tok-string,
    .tok-string2 {
      color: $hl-red;
    }

    .tok-keyword {
      color: $hl-purple;
    }

    .tok-comment {
      color: $grey;
    }

    .tok-strong {
      font-weight: bold;
    }

    .tok-typeName {
      color: $hl-green;
    }

    .tok-variableName {
      color: $hl-blue;
    }

    .tok-variableName2 {
      color: $hl-cyan;
    }

    .tok-operator {
      color: $hl-orange;
    }
  }

  .cm-line .ͼd {
    color: $link;
    font-weight: bold;
  }

  .cm-line .ͼg {
    color: $link;
  }

  .cm-line .ͼm {
    color: $grey;
  }

  .cm-line .ͼ9 {
    font-weight: bold;
  }

  .cm-cursor,
  .cm-dropCursor {
    border-left-color: $black;
    border-width: 2px;
  }

  .cm-tooltip {
    border: none;
    box-shadow: $shadow;
  }

  .cm-tooltip-autocomplete > ul > li[aria-selected] {
    background-color: $grey-lightest;
    color: $black-ter;
  }

  .cm-completionMatchedText {
    font-weight: bold;
  }

  .cm-tooltip-autocomplete > ul > li {
    background-color: $white;
    color: $black-ter;
  }

  .cm-panels-bottom {
    border-top: 1px solid $grey-lightest;
  }

  .cm-lintRange-active {
    background-color: transparent !important;
  }

  .cm-diagnostic {
    background: $white !important;
    color: $black-ter;
    font-size: 1rem;
    box-shadow: $shadow;
  }

  .cm-panel.cm-search {
    background: $white;
    color: $black-ter;

    .cm-button,
    .cm-textfield {
      @include control;
      background: $white;
      border: 1px solid $grey-lighter;
      font-size: 0.875rem;
    }

    .cm-textfield {
      min-width: 300px;
    }

    .cm-button {
      cursor: pointer;
      &:hover {
        border: 1px solid $grey-light;
      }
    }

    label {
      display: inline-flex;
      margin: 10px 15px 0 0;
      align-items: center;
      justify-content: left;
    }

    [name="close"] {
      font-size: 1rem;
      color: $black;
    }
  }

  .cm-searchMatch {
    background-color: rgba(255, 215, 0, 1);

    &.cm-searchMatch-selected {
      background-color: rgba(255, 87, 51, 0.2);
    }
  }

  .cm-collapsedLines {
    color: $grey-dark;
    background: $white-bis;
  }

  &.cm-merge-a {
    .cm-changedLine {
      background-color: $diff-del-bg-light;
    }

    .cm-changedText {
      background: $diff-del-bg-dark;
    }
  }

  &.cm-merge-b {
    .cm-changedLine {
      background-color: $diff-add-bg-light;
    }

    .cm-changedText {
      background: $diff-add-bg-dark;
    }
  }

  .cm-changedText {
    background: $diff-add-bg-dark;
    border: none;

    ins,
    del {
      text-decoration: none !important;
      span {
        color: $grey-darker !important;
      }
    }
  }
}

.template-editor .cm-editor {
  height: 200px;
}

.sheet-result {
  border-left: 1px solid $grey-lighter;
}

.sheet-editor .cm-editor {
}

.preview-editor {
  min-height: 35px;
}

.search-query-editor {
  border: 1px solid $grey-lighter;
  border-radius: $radius;
  background: $white;
  padding: 2px 5px;
  width: calc(100vw - 20px);
  @include desktop {
    width: 800px;
  }
}

.full-height {
  max-height: $editor-full-height;
}

.editor .cm-editor {
  max-height: $editor-full-height;
}

.cm-scroller {
  overflow: auto;
  font-family: $family-monospace !important;
  font-size: 0.9285714285714286rem;
}

.cm-focused {
  outline: none !important;
}

.cm-tooltip-hover {
  font-family: $family-monospace;
}

.cm-tag {
  height: 1.5em !important;
}

.svelte-select {
  --chevron-color: hsl(229deg, 53%, 53%);
  --font-size: 1rem;
  --background: #{$white};
  --list-background: #{$white};
  --item-hover-bg: #{$white-bis};
  --item-hover-color: #{$black-bis};
  --item-color: #{$text};
  --item-is-active-bg: #{$white-ter};
  --item-is-active-color: #{$black-ter};
  --border: 1px solid #{$grey-lighter};
  --border-focused: 1px solid #{$grey-lighter};
  --border-hover: 1px solid #{$grey-lighter};
  --list-shadow: #{$shadow};
  --height: 35px;
  --max-height: 35px;
  --multi-item-bg: #{$white-ter};
  --multi-item-outline: none;
  --multi-item-padding: 0 0.714em;
  --multi-item-clear-icon-color: #{$grey};

  .item.active span.name {
    font-weight: bold;
  }

  .selected-item {
    font-weight: bold;
    .tag {
      font-weight: normal !important;
    }
  }
}

.svelte-select.is-expandable {
  --max-height: 200px;
}

.sc-carousel-dots__dot-container {
  margin-top: 0.714em;
}

.sc-carousel-button.sc-carousel-dot__dot {
  color: $grey-lighter;

  button {
    color: $grey-lighter;
    &.sc-carousel-dot__dot_active {
      color: $grey-light;

      &:focus {
        outline: none;
      }
    }
  }
}

.custom-arrow-prev {
  border-radius: $radius 0 0 $radius;
  left: 0;
}

.custom-arrow-next {
  border-radius: 0 $radius $radius 0;
  right: 0;
}

.custom-arrow {
  width: 1.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: opacity 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: $white-ter;
  opacity: 0.5;

  &:hover {
    opacity: 1;
  }
}

nav.breadcrumb a.is-inactive {
  color: $grey;
  cursor: default;
  pointer-events: none;
}

.breadcrumb.has-chevron-separator li + li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: unquote('"#{ $fa-var-chevron-right }"');
  color: $link;
}

div.small-box:hover {
  background-color: $white-bis;
}

span.progress-percent {
  position: absolute;
  top: 0;
  margin-right: 5px;
  margin-top: 1px;
  color: $white;
}

span.progress-percent.less-than-10 {
  margin-left: 5px;
  color: $black-ter;
}

.progress {
  background: $white-ter;
}

.transaction.bordered {
  border-bottom: 1px solid rgba($grey-lightest, 0.5);
  padding-bottom: 1px;
}

.dropzone {
  border-color: $white-ter !important;
  background-color: $white-bis !important;
  color: $grey !important;
  transition: none !important;
}

.budget-card {
  .budget-label {
    width: 80px;
    text-align: right;
    color: $grey-light;
  }

  .budget-amount {
    width: 80px;
    text-align: right;
    text-weight: bold;

    &.info {
      font-weight: bold;
      padding: 2px 10px;
      background: $grey-lighter;
      color: $grey;
      border-radius: 10px;
    }

    &.success {
      font-weight: bold;
      padding: 2px 10px;
      background: #b2df8a;
      color: #257953;
      border-radius: 10px;
    }

    &.danger {
      font-weight: bold;
      padding: 2px 10px;
      background: #fb9a99;
      color: #cc0f35;
      border-radius: 10px;
    }

    &.warn {
      font-weight: bold;
      padding: 2px 10px;
      background: #ffe08a;
      color: #946c00;
      border-radius: 10px;
    }
  }
}

.month-picker {
  .months {
    width: 200px;

    .month {
      width: 50px;
      text-align: center;
    }
  }
}

.border-none {
  border-radius: 0 !important;
}

.border-left {
  border-radius: $radius 0 0 $radius !important;
}

.border-right {
  border-radius: 0 $radius $radius 0 !important;
}

.config-header {
  margin-left: -3px;
  margin-bottom: 5px;
}

.config-body {
  padding: 10px 0 10px 10px;
  margin-bottom: 10px;
  border-left: 1px solid $grey-lighter;
  border-bottom: 1px solid $grey-lighter;

  &.odd {
    background-color: $white-ter;
  }

  &.even {
    background-color: $white-bis;
  }
}

.config-delete,
.config-add {
  float: right;
  margin-right: 10px;
}

.config-delete {
  color: $danger;
}

.config-add {
  float: none;
  color: $success;
}

input:invalid,
textarea:invalid {
  border-color: $danger;
}

.dropdown-trigger.dropdown-icon {
  button {
    height: 2rem;
    padding: 0;
    border: none;
    background: none;
  }

  button:hover {
    color: $link;
  }
}

.nested.has-dropdown {
  &:hover > .dropdown-menu {
    display: block;
  }

  > .navbar-link {
    padding: 0;
    width: 100%;

    > span.icon {
      float: right;
    }
  }

  .dropdown-menu {
    top: -15px;
    margin-left: calc(100% - 10px);

    .dropdown-content {
      box-shadow: $shadow;
    }
  }

  @include mobile {
    .dropdown-menu {
      position: static;
      margin-left: 0;

      .dropdown-content {
        box-shadow: none !important;
        background-color: transparent;
      }
    }
  }
}

.custom-icon,
[data-tippy-root] {
  font-family: $family-sans-serif-icon;
}

.posting-row {
  grid-template-columns: 6rem 20rem 16rem 8rem 10rem 8rem 6rem 6rem 6rem 6rem;
  grid-auto-flow: column;
  overflow-x: auto;
  border-bottom: 1px solid rgba($grey-lightest, 0.5);
}

div.is-hoverable:hover {
  background-color: $white-bis;
}

// credit card

.credit-card-container {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 25rem));
}

.credit-card {
  aspect-ratio: 3.375/2.125;
  max-width: 25rem;
  min-width: 19rem;
  flex: 1;
  border-radius: 0.7rem;
  display: flex;
  border: 1px solid $grey-lightest;
  box-shadow:
    5px 5px 5px 0 rgba(0, 0, 0, 0.2),
    15px 15px 15px 0 rgba(0, 0, 0, 0.1),
    30px 30px 30px 0 rgba(0, 0, 0, 0.075),
    -3px -3px 3px 0 rgba(255, 255, 255, 1),
    -7px -7px 7px 0 rgba(255, 255, 255, 1),
    -15px -15px 15px 0 rgba(255, 255, 255, 1) !important;
  background: linear-gradient(
    345deg,
    $grey-lightest 0%,
    $grey-lightest 60%,
    $grey-lighter calc(60% + 1px),
    $grey-lighter 85%,
    $grey-light calc(85% + 1px),
    $grey-light 95%,
    $grey calc(95% + 1px),
    $grey 100%
  );

  .chip {
    color: $amber-700;
  }

  .nfc {
    color: $black;
  }
}
