@use "mixins";
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
@use "@layouts/styles/_placeholders";
@use "@configured-variables" as variables;

// 👉 Avatar font-size
.v-avatar {
  @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
}

// 👉 Avatar group
.v-avatar-group {
  display: flex;
  align-items: center;

  > * {
    &:not(:first-child) {
      margin-inline-start: -0.8rem;
    }

    transition: transform 0.25s ease, box-shadow 0.15s ease;

    &:hover {
      z-index: 2;
      transform: translateY(-5px) scale(1.05);

      @include mixins_elevation.elevation(3);
    }
  }

  > .v-avatar {
    border: 2px solid rgb(var(--v-theme-surface));
  }
}

// Dialog responsive width
.v-dialog {
  .v-card {
    @extend %style-scroll-bar;
  }
}

@media (min-width: 576px) {
  .v-dialog {
    &.v-dialog-sm,
    &.v-dialog-lg,
    &.v-dialog-xl {
      inline-size: 565px !important;
    }
  }
}

@media (min-width: 992px) {
  .v-dialog {
    &.v-dialog-lg,
    &.v-dialog-xl {
      inline-size: 865px !important;
    }
  }
}

@media (min-width: 1200px) {
  .v-dialog.v-dialog-xl,
  .v-dialog.v-dialog-xl .v-overlay__content > .v-card {
    inline-size: 1165px !important;
  }
}

// v-tab with pill support

.v-tabs.v-tabs-pill {
  .v-tab.v-btn {
    border-radius: 0.375rem !important;
    min-inline-size: 8.125rem;
    transition: none;

    .v-tab__slider {
      visibility: hidden;
    }
  }

  .v-slide-group__content {
    transition: none;
  }
}

// loop for all colors bg
@each $color-name in variables.$theme-colors-name {
  .v-tabs.v-tabs-pill {
    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
      background-color: rgb(var(--v-theme-#{$color-name}));
      color: rgb(var(--v-theme-on-#{$color-name})) !important;
    }
  }
}

// 👉 added box shadow
.v-timeline-item {
  .v-timeline-divider__dot {
    .v-timeline-divider__inner-dot {
      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));

      @each $color-name in variables.$theme-colors-name {

        &.bg-#{$color-name} {
          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
        }
      }
    }
  }
}

// 👉 Timeline Outlined style
.v-timeline-variant-outlined.v-timeline {
  .v-timeline-divider__dot {
    .v-timeline-divider__inner-dot {
      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));

      @each $color-name in variables.$theme-colors-name {
        background-color: rgb(var(--v-theme-surface)) !important;

        &.bg-#{$color-name} {
          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
        }
      }
    }
  }
}

// ℹ️ We are make even width of all v-timeline body
.v-timeline--vertical.v-timeline {
  .v-timeline-item {
    .v-timeline-item__body {
      justify-self: stretch !important;
    }
  }
}

// 👉 Expansion panels
.v-expansion-panel-title,
.v-expansion-panel-title--active,
.v-expansion-panel-title:hover,
.v-expansion-panel-title:focus,
.v-expansion-panel-title:focus-visible,
.v-expansion-panel-title--active:focus,
.v-expansion-panel-title--active:hover {
  .v-expansion-panel-title__overlay {
    opacity: 0 !important;
  }
}

// 👉 Set Elevation when panel open

.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
  .v-expansion-panel.v-expansion-panel--active {
    .v-expansion-panel__shadow {
      @include mixins_elevation.elevation(3);
    }
  }
}

// 👉 Slider

.v-slider.v-input--horizontal .v-slider-track__fill {
  block-size: var(--v-slider-track-size);
}

.v-slider.v-input--vertical .v-slider-track__fill {
  inline-size: var(--v-slider-track-size);
}

.v-slider-thumb {
  .v-slider-thumb__label {
    color: rgb(var(--v-theme-on-primary));
  }
}

// 👉 Table
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
  block-size: 50px;
}
