@use 'sass:map';
@use 'palette' as palette;
@use 'settings' as settings;
@use 'vuetify';

@include palette.util-classes('shark', palette.$shark);
@include palette.util-classes('minsk', palette.$minsk);
@include palette.util-classes('picton', palette.$picton);
@include palette.util-classes('malachite', palette.$malachite);
@include palette.util-classes('lightning', palette.$lightning);
@include palette.util-classes('amaranth', palette.$amaranth);

html {
  overflow: hidden;
}

.material-symbols-filled {
  // Used for 'filled' icon set
  font-variation-settings: 'FILL' 1;
}

@mixin slider-dot {
  content: url('@/assets/images/dot.svg');
  width: 4px;
  height: 4px;
  position: absolute;
  top: -6.5px;
}

.new-style {
  --md: 12px !important;
  --xxl: 24px !important;
  --xxxxl: 48px !important;
  --base: 8px !important;

  .sh-label {
    @extend .text-xs-semibold;
    color: rgb(var(--v-theme-text)) !important;
  }

  .v-input,
  .v-otp-input {
    .v-input__details {
      padding-inline: 0;
      margin-top: 2px;

      .v-messages {
        color: rgb(var(--v-theme-amaranth_700)) !important;
      }
    }

    .v-field {
      opacity: 1 !important;
      background-color: rgb(var(--v-theme-surface));

      input {
        line-height: 1.5;
        font-size: 16px !important;
      }

      .v-field__outline {
        color: map.get(palette.$shark, 200) !important;
        --v-field-border-width: 1px !important;
        --v-field-border-opacity: 1 !important;
      }
    }

    .v-field:hover:not(.v-field--focused):not(.v-field--error) {
      .v-field__outline {
        opacity: 1 !important;
        color: rgb(var(--v-theme-minsk_900)) !important;
        --v-field-border-width: 1px !important;
      }
    }

    .v-field--focused {
      .v-field__outline {
        opacity: 1 !important;
        --dynamic-color: rgb(var(--v-theme-primary)) !important;
        --ring-color: rgb(var(--v-theme-minsk_200)) !important;
        color: var(--dynamic-color) !important;
        --v-field-border-width: 1px !important;
      }
    }

    .v-field--error {
      .v-field__outline {
        opacity: 1 !important;
        --dynamic-color: rgb(var(--v-theme-amaranth_500)) !important;
        --ring-color: rgb(var(--v-theme-amaranth_200)) !important;
        color: var(--dynamic-color) !important;
        --v-field-border-width: 1px !important;
      }
    }

    .v-field--error:hover {
      .v-field__outline {
        opacity: 1 !important;
        --dynamic-color: rgb(var(--v-theme-amaranth_700)) !important;
        --ring-color: rgb(var(--v-theme-amaranth_200)) !important;
        color: var(--dynamic-color) !important;
        --v-field-border-width: 1px !important;
      }
    }

    &:not(.hide-ring) .v-field--error .v-field__outline,
    &:not(.hide-ring) .v-field--focused .v-field__outline {
      box-shadow: 0 0 0 4px var(--ring-color);
    }
  }

  .v-checkbox .v-selection-control {
    --v-input-control-height: 36px;
  }
}

// TODO: Dark Slider
.v-range-slider.v-input--horizontal,
.v-slider.v-input--horizontal {
  & {
    margin-inline: 0 !important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .v-slider-thumb {
    & {
      transform: translateX(10%) translateY(-50%) !important;
      background-color: var(--thumbBackgroundColor, #f7f7f8);
      width: 14px;
      height: 44px;
    }

    .v-slider-thumb__surface {
      border-radius: 4px;
      box-shadow: none !important;
      width: 2px;
      height: 44px;
      position: relative;
      transform: translateX(6px);
      background-color: map.get(palette.$minsk, 500);
    }

    .v-slider-thumb__surface::before,
    .v-slider-thumb__ripple {
      display: none;
    }

    .v-slider-thumb__label {
      & {
        @extend .text-center;
        @extend .text-sm-semibold;
        border-radius: var(--lg, 16px);
        background: map.get(palette.$minsk, 200);
        padding: var(--md, 12px) 8px;
        color: map.get(palette.$minsk, 900);
        bottom: calc(var(--v-slider-thumb-size) / 3) !important;
      }

      &::before {
        display: none;
      }
    }
  }

  .v-slider-track__background,
  .v-slider-track__fill {
    height: 16px !important;
  }

  .v-slider-track__fill {
    & {
      background-color: map.get(palette.$minsk, 500);
      border-radius: 4px;
      margin-left: 6px;
    }

    &::after {
      @include slider-dot;
      left: 50%;
      transform: translate(-195%, -50%);
      // https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(76%) sepia(30%) saturate(342%) hue-rotate(192deg)
        brightness(106%) contrast(98%);
    }
  }

  .v-slider-track__background {
    & {
      border-radius: 12px;
      background-color: #ccccd0;
      opacity: 1 !important;
    }

    &::before,
    &::after {
      @include slider-dot;
      transform: translate(-50%, -50%);
      // https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(38%) sepia(5%) saturate(1118%) hue-rotate(202deg)
        brightness(92%) contrast(89%);
    }

    &::before {
      left: 8px;
    }

    &::after {
      right: 4px;
    }
  }
}

.v-slider.v-input--vertical {
  & {
    margin-inline: 0 !important;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .v-input__control {
    /* https://github.com/vuetifyjs/vuetify/issues/18813 */
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  .v-slider-thumb {
    & {
      transform: translateX(10%) translateY(-50%) !important;
      background-color: var(--thumbBackgroundColor, #f7f7f8);
      width: 44px;
      height: 14px;
    }

    .v-slider-thumb__surface {
      border-radius: 4px;
      box-shadow: none !important;
      width: 44px;
      height: 2px;
      position: relative;
      transform: translateY(6px) translateX(-5px);
      background-color: #c9d7fc;
    }

    .v-slider-thumb__surface::before,
    .v-slider-thumb__ripple {
      display: none;
    }

    .v-slider-thumb__label {
      & {
        @extend .text-center;
        @extend .text-sm-semibold;
        border-radius: var(--lg, 16px);
        background: var(--Primary-200, #c9d7fc);
        color: var(--Primary-900, #2e3176);
        min-height: 44px;
        left: -22px;
        top: -22px;
      }

      div {
        padding: var(--md, 12px) 8px !important;
      }

      &::before {
        display: none;
      }
    }
  }

  .v-slider-track__background,
  .v-slider-track__fill {
    width: 16px !important;
  }

  .v-slider-track__fill {
    & {
      background-color: #c9d7fc;
      border-radius: 0px 0px 12px 12px;
    }

    &::after {
      @include slider-dot;
      bottom: 20px;
      left: 6.2px;
      top: unset;
      // https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(16%) sepia(44%) saturate(2660%) hue-rotate(222deg)
        brightness(89%) contrast(92%);
    }
  }

  .v-slider-track__background {
    & {
      border-radius: 12px;
      background-color: #3a3a40;
      opacity: 1 !important;
    }

    &::before,
    &::after {
      @include slider-dot;
      transform: translate(-50%, -50%);
      // https://codepen.io/sosuke/pen/Pjoqqp
      filter: invert(80%) sepia(45%) saturate(382%) hue-rotate(190deg)
        brightness(101%) contrast(98%);
    }

    &::before {
      left: 8px;
    }

    &::after {
      right: 4px;
    }
  }
}

.v-btn {
  &.v-btn--variant-outlined {
    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
  }

  .v-btn__prepend {
    margin-inline-end: 8px !important;

    .v-icon {
      --v-icon-size-multiplier: 1 !important;
    }
  }
}

.v-btn-toggle {
  .v-btn {
    color: map.get(palette.$minsk, 900) !important;
  }

  .v-btn--active {
    background-color: map.get(palette.$minsk, 200) !important;
  }
}

.v-list {
  @extend .pa-2;

  &:not(.no-hover) {
    .v-list-item {
      transition: background-color 0.3s ease;
      border-radius: 8px !important;

      &:hover {
        background-color: map.get(palette.$minsk, 50) !important;
      }
    }
  }
}

.v-tabs:not(.fallback) {
  border-radius: 8px !important;

  .v-slide-group__next,
  .v-slide-group__prev {
    display: none;
  }

  .v-slide-group__container {
    background: map.get(palette.$minsk, 100) !important;

    .v-btn {
      border-radius: 4px;
      height: auto !important;
      margin: 6px;
      min-width: 64px !important;

      & ~ .v-btn {
        margin-left: 0 !important;
        margin-right: 6px !important;
      }

      .v-btn__content {
        color: rgb(var(--v-theme-primary));
        text-align: center !important;
      }
    }

    .v-tab-item--selected {
      background: rgb(var(--v-theme-surface)) !important;
      box-shadow:
        0 1px 3px 0 rgba(29, 29, 73, 0.1),
        0 1px 2px -1px rgba(29, 29, 73, 0.1) !important;

      .v-btn__content {
        color: map.get(palette.$minsk, 900) !important;
      }
    }
  }
}

.v-tabs.fallback {
  .v-btn {
    &:not(.v-tab-item--selected) .v-btn__underlay {
      background: transparent !important;
    }
    .v-btn__underlay,
    .v-btn__overlay,
    .v-ripple__container {
      top: 8% !important;
      bottom: 8% !important;
      left: 8% !important;
      right: 8% !important;
      height: 84%;
      width: 84%;
    }
  }
}

.v-tabs.vertical_squash {
  .v-slide-group__container {
    background: map.get(palette.$minsk, 100) !important;

    .v-btn {
      padding: 0 !important;
      border-radius: 4px !important;
      height: auto !important;
      margin: 6px !important;
      min-width: 0px !important;
      min-height: 36px !important;

      .v-btn__content {
        color: rgb(var(--v-theme-primary)) !important;
        text-align: center !important;
        margin: auto;
      }
    }

    .v-tab-item--selected {
      background: rgb(var(--v-theme-surface)) !important;
      box-shadow:
        0 1px 3px 0 rgba(29, 29, 73, 0.1),
        0 1px 2px -1px rgba(29, 29, 73, 0.1) !important;

      .v-btn__content {
        color: map.get(palette.$minsk, 900) !important;
      }
    }
  }
}

.v-overlay__scrim,
.v-navigation-drawer__scrim {
  opacity: 1 !important;
  background-color: rgba(31, 31, 55, 0.9) !important;
  backdrop-filter: blur(20px) !important;
}

.isModal {
  background-color: rgba(31, 31, 55, 0.9);

  .title-display {
    color: rgb(var(--v-theme-surface));
  }

  .display {
    font-weight: 600;
    color: map.get(palette.$shark, 300);
  }
}