@use 'variables';

// .col-1,
// .col-2,
// .col-3,
// .col-4,
// .col-5,
// .col-6,
// .col-7,
// .col-8,
// .col-9,
// .col-10,
// .col-11,
// .col-12,
// .col-md-1,
// .col-md-2,
// .col-md-3,
// .col-md-4,
// .col-md-5,
// .col-md-6,
// .col-md-7,
// .col-md-8,
// .col-md-9,
// .col-md-10,
// .col-md-11,
// .col-md-12,
// .col-sm-1,
// .col-sm-2,
// .col-sm-3,
// .col-sm-4,
// .col-sm-5,
// .col-sm-6,
// .col-sm-7,
// .col-sm-8,
// .col-sm-9,
// .col-sm-10,
// .col-sm-11,
// .col-sm-12,
// .col-lg-1,
// .col-lg-2,
// .col-lg-3,
// .col-lg-4,
// .col-lg-5,
// .col-lg-6,
// .col-lg-7,
// .col-lg-8,
// .col-lg-9,
// .col-lg-10,
// .col-lg-11,
// .col-lg-12,
// .col-xl-1,
// .col-xl-2,
// .col-xl-3,
// .col-xl-4,
// .col-xl-5,
// .col-xl-6,
// .col-xl-7,
// .col-xl-8,
// .col-xl-9,
// .col-xl-10,
// .col-xl-11,
// .col-xl-12,
// .col,
// .col-auto,
// .col-sm,
// .col-sm-auto,
// .col-md,
// .col-md-auto,
// .col-lg,
// .col-lg-auto,
// .col-xl,
// .col-xl-auto {
// height: min-content;
// }

body,
.v-application--wrap {
  background-color: variables.$background-color;
  color: variables.$text-color;
  font-family: Inter, 'Lexend Deca', sans-serif;
  position: relative;
}

.container {
  max-width: 90vw;
  min-height: 100vh;
}

.navbar a {
  color: variables.$text-color !important;
}

// Use h1 only on page titles
h1 {
  font-size: 48px;
  font-weight: 400;
  text-align: left;
  // margin-top: 48px;
  // margin-bottom: 48px;
  margin: 0;

  @media screen and (max-width: 768px) {
    font-size: 48px;
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 32px;
  margin-bottom: 40px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

h1
// h2,
// h3,
// h4,
// h5,
// h6
{
  // text-transform: uppercase;
}

h2 {
  &.graph-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }
}

.p1 {
  font-size: 14px;
  font-weight: 400;
  // line-height: 1.5;
  // margin-bottom: 24px;
}

.p2 {
  font-size: 18px;
  font-weight: 400;
  // line-height: 1.5;
}

// Custom Scrollbar
::-webkit-scrollbar {
  width: 8px;
  height: 8px;

  &-thumb {
    background: lighten(variables.$secondary-background-color, 10%);
    border-radius: 10px;
  }

  &-thumb:hover {
    background: lighten(variables.$secondary-background-color, 7%);
  }

  &-thumb:active {
    background: lighten(variables.$secondary-background-color, 5%);
  }

  &-corner {
    background: rgba(0, 0, 0, 0);
  }
}

.btn {
  border-radius: variables.$border-radius;

  &.btn-primary {
    background-color: variables.$standout-color !important;
    color: white !important;

    &:hover {
      background-color: darken(variables.$standout-color, 10%) !important;
      color: lighten(white, 10%) !important;
    }

    &:active {
      background-color: darken(variables.$standout-color, 20%) !important;
      color: lighten(white, 20%) !important;
    }
  }

  &.btn-secondary {
    border: 1px solid variables.$border-muted-color !important;
    color: variables.$text-muted-color !important;
    background-color: transparent !important;

    &:hover {
      background-color: lighten(variables.$background-color, 3%) !important;
      color: lighten(variables.$text-muted-color, 3%) !important;
    }

    &:active {
      background-color: lighten(variables.$background-color, 4%) !important;
      color: darken(variables.$text-muted-color, 9%) !important;
    }
  }

  &.btn-outline-primary {
    border-color: darken(white, 30%) !important;
    color: white !important;

    &:hover {
      background-color: white !important;
      color: black !important;
    }
  }

  &.btn-picker {
    border: 1px solid variables.$border-muted-color !important;
    color: variables.$text-muted-color !important;

    &:hover {
      // TODO
    }

    &:active {
      // TODO
    }
  }
}

.form-control {
  background-color: variables.$input-background;
  border: 1px solid variables.$input-border !important;
  border-radius: variables.$border-radius;

  color: darken(variables.$text-color, 15%);

  &:hover {
    background-color: lighten(variables.$background-color, 3%);
  }

  &:focus {
    // TODO(@ant0n7): Remove blue border
    background-color: variables.$input-background;
    color: darken(variables.$text-color, 15%);
    outline: none !important;
    border-color: variables.$input-border !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
  }

  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;

  &:disabled {
    background-color: variables.$input-background;
    color: darken(variables.$text-muted-color, 15%);

    &:hover {
      cursor: not-allowed;
    }
  }
}

.input-border {
  border: 1px solid variables.$input-border !important;
  border-color: variables.$input-border !important;
  border-radius: 100px;
}

.color-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.form-control-color {
  background-color: transparent;
  padding: 0;
  border: none;
  border-radius: 50%;
  height: 24px;
  width: 24px;

  &::-webkit-color-swatch,
  &::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
  }
}

.form-select {
  cursor: pointer;
  border: 1px solid variables.$input-border !important;
}

label {
  margin-bottom: 0.2em;
}

.input-group-append,
.input-group-prepend {
  span {
    border: 1px solid variables.$input-border !important;
    border-color: variables.$input-border !important;
    background-color: variables.$input-background;
    color: darken(variables.$text-muted-color, 15%);
  }
}

.input-group-append {
  span {
    border-radius: 0 variables.$border-radius variables.$border-radius 0;
  }
}

.input-group-prepend {
  span {
    border-radius: variables.$border-radius 0 0 variables.$border-radius;
  }
}

.bg-secondary {
  background-color: variables.$secondary-background-color !important;
}

.bg-tertiary {
  background-color: variables.$tertiary-background-color !important;
}

.bg-alt {
  background-color: variables.$alt-background-color !important;
}

.bg-standout {
  background-color: variables.$standout-background-color !important;
}

a {
  color: variables.$standout-color;
  cursor: pointer !important;
}

.pointer {
  cursor: pointer !important;
}

.focused-container {
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.2);
}

.focused-container-border {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.movable,
.movable :not(button) {
  // cursor: move;
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  svg {
    font-size: 0.8rem;
    margin-right: 0.35rem;
    opacity: 0.8;
    // color: #6c757d;
  }

  h5 {
    margin-bottom: 0;
  }
}

.chip-wrapper .chip:first-child {
  margin-left: 0 !important;
}

.chip-wrapper .chip:last-child {
  margin-right: 0 !important;
}

.chip {
  background-color: lighten(variables.$secondary-background-color, 20%);
  border-radius: 20px;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 400;
  color: darken(variables.$text-color, 20%);
  text-decoration: none;

  &:hover {
    background-color: lighten(variables.$secondary-background-color, 25%);
    color: darken(variables.$text-color, 15%);
    text-decoration: none;
  }

  &:active {
    background-color: lighten(variables.$secondary-background-color, 30%);
    color: darken(variables.$text-color, 20%);
    text-decoration: none;
  }

  // Transform delay
  transition: all 0.2s ease-in-out;
}

.toasted-container .toasted {
  border-radius: variables.$border-radius;
}

.v-switch-core {
  border-radius: 6px !important;
}

.v-switch-button[data-v-25adc6c0] {
  border-radius: 5px !important;
}

label[data-v-25adc6c0].vue-js-switch.toggled {
  div[data-v-25adc6c0].v-switch-core {
    background-color: variables.$standout-color !important;
  }
}

.subcard {
  background-color: #171923;
  border-radius: 16px;
  padding: 1.2rem;
}

.border-radius-8 {
  border-radius: 8px !important;
}

.border-radius-16 {
  border-radius: 16px !important;
}

.gap-1x {
  gap: variables.$base-multiplier;
}

.gap-2x {
  gap: calc(variables.$base-multiplier * 2);
}

.ps-2x {
  padding-left: calc(variables.$base-multiplier * 2);
}

.cut-after-lines {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden-md-and-down {
  @media (max-width: 991.98px) {
    display: none;
  }
}

.hidden-lg-and-up {
  @media (min-width: 992px) {
    display: none;
  }
}

.h-fit-content {
  height: fit-content;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.z-200 {
  z-index: 200;
}

.object-fit-cover {
  object-fit: cover;
}

.text-align-justify {
  text-align: justify;
}

.font-size-small {
  font-size: 0.8rem;
}

.rounded-circle {
  object-fit: cover;
}