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

// 👉 VExpansionPanel
.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
.v-expansion-panels {
  .v-expansion-panel {
    .v-expansion-panel__shadow {
      @include mixins_elevation.elevation(3);
    }
  }

  .v-expansion-panel-text__wrapper {
    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
    font-size: 1rem;
  }
}

// 👉 Timeline outlined variant
.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}));
        }
      }
    }
  }
}

// 👉 v-tab with pill support
.v-tabs.v-tabs-pill {
  .v-tab.v-btn {
    border-radius: 0.375rem !important;
  }
}