// app global css in SCSS form
@use "sass:list";

// no browser color/decoration for links
a,
a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
}

// Shadow fixes: https: //github.com/quasarframework/quasar/issues/15144#issuecomment-1494673280
$shadow-color: #000 !default;
$dark-shadow-color: #fff !default;

:root {
  --q-shadow-color: #{to-rgb($shadow-color)};
  --q-dark-shadow-color: #{to-rgb($dark-shadow-color)};
  --q-dark-shadow-opacity: 1;
}

$shadow-offsets: [ (1px, 3px, 0, 1px, 0, 2px, 1px, -1px),
  (1px, 5px, 0, 2px, 0, 3px, 1px, -2px), (1px, 8px, 0, 4px, 0, 3px, 3px, -2px),
  (2px, 4px, -1px, 5px, 0, 1px, 10px, 0), (3px, 5px, -1px, 8px, 0, 1px, 14px, 0),
  (3px, 5px, -1px, 10px, 0, 1px, 18px, 0),
  (4px, 5px, -2px, 10px, 1px, 2px, 16px, 1px),
  (5px, 5px, -3px, 10px, 1px, 3px, 14px, 2px),
  (5px, 6px, -3px, 12px, 1px, 3px, 16px, 2px),
  (6px, 6px, -3px, 14px, 1px, 4px, 18px, 3px),
  (6px, 7px, -4px, 15px, 1px, 4px, 20px, 3px),
  (7px, 8px, -4px, 17px, 2px, 5px, 22px, 4px),
  (7px, 8px, -4px, 19px, 2px, 5px, 24px, 4px),
  (7px, 9px, -4px, 21px, 2px, 5px, 26px, 4px),
  (8px, 9px, -5px, 22px, 2px, 6px, 28px, 5px),
  (8px, 10px, -5px, 24px, 2px, 6px, 30px, 5px),
  (8px, 11px, -5px, 26px, 2px, 6px, 32px, 5px),
  (9px, 11px, -5px, 28px, 2px, 7px, 34px, 6px),
  (9px, 12px, -6px, 29px, 2px, 7px, 36px, 6px),
  (10px, 13px, -6px, 31px, 3px, 8px, 38px, 7px),
  (10px, 13px, -6px, 33px, 3px, 8px, 40px, 7px),
  (10px, 14px, -6px, 35px, 3px, 8px, 42px, 7px),
  (11px, 14px, -7px, 36px, 3px, 9px, 44px, 8px),
  (11px, 15px, -7px, 38px, 3px, 9px, 46px, 8px)];

@for $i from 1 through length($shadow-offsets) {
  .shadow-#{$i} {
    $offsets: list.nth($shadow-offsets, $i);
    box-shadow: 0 list.nth($offsets, 1) list.nth($offsets, 2) list.nth($offsets, 3) rgba(var(--q-shadow-color), 0.2),
    0 #{$i}px list.nth($offsets, 4) list.nth($offsets, 5) rgba(var(--q-shadow-color), 0.14),
    0 list.nth($offsets, 6) list.nth($offsets, 7) list.nth($offsets, 8) rgba(var(--q-shadow-color), 0.12);
  }

  .shadow-up-#{$i } {
    $offsets: list.nth($shadow-offsets, $i);
    box-shadow: 0 #{0 -
 list.nth($offsets, 1)
  }

  list.nth($offsets, 2) list.nth($offsets, 3) rgba(var(--q-shadow-color), 0.2),
  0 #{0 -
 $i
}

px list.nth($offsets, 4) list.nth($offsets, 5) rgba(var(--q-shadow-color), 0.14),
0 list.nth($offsets, 6) list.nth($offsets, 7) list.nth($offsets, 8) rgba(var(--q-shadow-color), 0.12);
}

body.body--dark {
  .shadow-#{$i } {
    $offsets: list.nth($shadow-offsets, $i);
    box-shadow: 0 list.nth($offsets, 1) list.nth($offsets, 2) list.nth($offsets, 3) rgba(var(--q-dark-shadow-color),
      calc(0.2 * var(--q-dark-shadow-opacity))),
    0 #{$i}px list.nth($offsets, 4) list.nth($offsets, 5) rgba(var(--q-dark-shadow-color),
      calc(0.14 * var(--q-dark-shadow-opacity))),
    0 list.nth($offsets, 6) list.nth($offsets, 7) list.nth($offsets, 8) rgba(var(--q-dark-shadow-color),
      calc(0.12 * var(--q-dark-shadow-opacity)));
  }

  .shadow-up-#{$i } {
    $offsets: list.nth($shadow-offsets, $i);
    box-shadow: 0 #{0 -
 list.nth($offsets, 1)
  }

  list.nth($offsets, 2) list.nth($offsets, 3) rgba(var(--q-dark-shadow-color),
    calc(0.2 * var(--q-dark-shadow-opacity))),
  0 #{0 -
 $i
}

px list.nth($offsets, 4) list.nth($offsets, 5) rgba(var(--q-dark-shadow-color),
  calc(0.14 * var(--q-dark-shadow-opacity))),
0 list.nth($offsets, 6) list.nth($offsets, 7) list.nth($offsets, 8) rgba(var(--q-dark-shadow-color),
  calc(0.12 * var(--q-dark-shadow-opacity)));
}
}
}

.q-layout__shadow::after {
  box-shadow: 0 0 10px 2px rgba(var(--q-shadow-color), 0.2),
    0 0px 10px rgba(var(--q-shadow-color), 0.24);
}

.inset-shadow {
  box-shadow: 0 7px 9px -7px rgba(var(--q-shadow-color), 0.7) inset;
}

.inset-shadow-down {
  box-shadow: 0 -7px 9px -7px rgba(var(--q-shadow-color), 0.7) inset;
}

.q-layout__shadow::after {
  box-shadow: 0 0 10px 2px rgba(var(--q-shadow-color), 0.2),
    0 0px 10px rgba(var(--q-shadow-color), 0.24);
}

body.body--dark {
  .inset-shadow {
    box-shadow: 0 7px 9px -7px rgba(var(--q-dark-shadow-color),
        calc(0.7 * var(--q-dark-shadow-opacity))) inset;
  }

  .inset-shadow-down {
    box-shadow: 0 -7px 9px -7px rgba(var(--q-dark-shadow-color), calc(0.7 * var(--q-dark-shadow-opacity))) inset;
  }

  .q-layout__shadow::after {
    box-shadow: 0 0 10px 2px rgba(var(--q-dark-shadow-color),
        calc(0.2 * var(--q-dark-shadow-opacity))),
      0 0px 10px rgba(var(--q-dark-shadow-color),
        calc(0.24 * var(--q-dark-shadow-opacity)));
  }
}

.q-card--dark,
.q-date--dark,
.q-time--dark,
.q-menu--dark,
.q-color-picker--dark,
.q-table__card--dark,
.q-table--dark,
.q-uploader--dark {
  box-shadow: 0 1px 5px rgba(var(--q-dark-shadow-color), calc(0.2 * var(--q-dark-shadow-opacity))),
    0 2px 2px rgba(var(--q-dark-shadow-color),
      calc(0.14 * var(--q-dark-shadow-opacity))),
    0 3px 1px -2px rgba(var(--q-dark-shadow-color), calc(0.12 * var(--q-dark-shadow-opacity)));
}

/* ignore from here, leave this comment */
// demo specific styles
.shadow-box {
  width: 90px;
  height: 90px;
  margin: 25px;
  border-radius: 50%;
  font-size: 12px;
  background-color: #fafafa;
}

.doc-inset-shadow {
  width: 120px;
  height: 120px;
  padding: 4px;
}

body.body--dark {
  .shadow-box {
    background-color: #141414;
  }

  .doc-inset-shadow {
    background-color: #101010;
  }
}

// now you can override color using CSS variables (if not defined in quasar config)
//:root {
//--q-shadow-color: 0, 0, 255;
//--q-dark-shadow-color: 255, 0, 0;
//}


// CUSTOM

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
