MoviePilot-Frontend/src/@core/scss/_components.scss

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

// 👉 Alert
.v-alert {
  .v-alert__close {
    .v-icon {
      block-size: 20px !important;
      font-size: 20px !important;
      inline-size: 20px !important;
    }
  }

  &:not(.v-alert--prominent) .v-alert__prepend {
    .v-icon {
      block-size: 1.375rem !important;
      font-size: 1.375rem !important;
      inline-size: 1.375rem !important;
    }
  }

  .v-alert-title {
    line-height: 1.5rem;
    margin-block-end: 0.25rem;
  }
}

// 👉 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));
  }
}

// 👉 Button
.v-btn {
  /* stylelint-disable-next-line no-descending-specificity */
  &:not(.v-btn--icon) .v-icon {
    --v-icon-size-multiplier: 0.9525 !important;
  }
}

// 👉 Chip
.v-chip.v-chip--size-default .v-avatar {
  --v-avatar-height: 24px;
}

.v-chip.v-chip--density-comfortable {
  line-height: 1;
}

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

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

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

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

// 👉 Expansion Panel
.v-expansion-panel {
  .v-expansion-panel-text {
    font-size: 1rem;
  }
}

// 👉 Tooltip
.v-tooltip > .v-overlay__content {
  font-weight: 500;
  line-height: 0.875rem;
}

// 👉 List

//  👉 Tab with pill support
.v-tabs.v-tabs-pill {
  .v-tab.v-btn {
    border-radius: 6px !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;
    }
  }
}

// 👉 Timeline 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 {
    background: rgb(117, 117, 117);
    color: rgb(var(--v-theme-on-primary));

    &::before {
      color: rgb(117, 117, 117);
    }
  }
}

// 👉 Switch
.v-switch {
  .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
    color: #fff;
  }
}

// 👉 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 !important;
}

.v-table {
  --v-table-header-height: 54px !important;

  th {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
    font-size: 0.75rem;

    .v-data-table-header__content {
      display: flex;
      justify-content: space-between;
    }
  }

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

.v-data-table {
  th {
    background: rgb(var(--v-table-header-background)) !important;
  }
}

// 👉 Pagination
.v-pagination {
  .v-btn {
    border-radius: 4px;
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
    font-size: 14px;
    font-weight: 400;
  }
}

// 👉 SnackBar
.v-snackbar--variant-elevated {
  @include mixins.elevation(6);
}