@winchsa/ui 0.1.31 → 0.1.33

package/dist/styles/core/template/_components.scss

@@ -1,1035 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '../base/mixins';
-@use '../../layouts/mixins' as layoutsMixins;
-@use '../../assets/scss/variables/template' as variables;
-@use '../../assets/scss/variables/vuetify';
-
-//  Autocomplete
-.v-input--density-compact .v-field--variant-plain,
-.v-input--density-compact .v-field--variant-underlined {
-  --v-input-control-height: 40px !important;
-}
-
-//  Body
-// set body font size 15px
-body {
-  font-size: 15px !important;
-}
-
-//  Avatar
-.v-avatar {
-  font-weight: 500;
-}
-
-//  Alert
-// ℹ️ custom icon styling
-
-$alert-prepend-icon-font-size: 1.125rem !important;
-
-.v-alert {
-  font-weight: 500;
-
-  &:not(.v-alert--prominent) .v-alert__prepend {
-    .v-icon {
-      block-size: 1.625rem !important;
-      font-size: 1.625rem !important;
-      inline-size: 1.625rem !important;
-    }
-  }
-
-  .v-alert-title {
-    margin-block-end: 0.55rem;
-  }
-
-  .v-alert__close {
-    .v-btn--icon {
-      --v-btn-height: 4px;
-
-      font-size: 0.5rem;
-      margin-block-end: 0.2rem;
-
-      .v-btn__overlay,
-      .v-ripple__container {
-        opacity: 0;
-      }
-    }
-  }
-
-  &:not(.v-alert--prominent) {
-    .v-alert__prepend {
-      .v-icon {
-        padding: 0.275rem;
-        border-radius: 0.375rem;
-        background-color: rgb(var(--v-theme-surface));
-      }
-    }
-
-    &.v-alert--variant-flat,
-    &.v-alert--variant-elevated {
-      .v-alert__prepend {
-        .v-icon {
-          background-color: #fff;
-        }
-      }
-    }
-  }
-}
-
-.v-alert.v-alert--density-compact {
-  border-radius: 0.25rem;
-}
-
-.v-alert.v-alert--density-default {
-  border-radius: 0.5rem;
-}
-
-@each $color-name in variables.$theme-colors-name {
-  .v-alert {
-    &:not(.v-alert--prominent) {
-      &.bg-#{$color-name},
-      &.text-#{$color-name} {
-        .v-alert__prepend .v-icon {
-          color: rgb(var(--v-theme-#{$color-name})) !important;
-        }
-      }
-    }
-
-    &.v-alert--variant-outlined,
-    &.v-alert--variant-text,
-    &.v-alert--variant-plain {
-      &:not(.v-alert--prominent) {
-        &.text-#{$color-name},
-        &.bg-#{$color-name} {
-          .v-alert__prepend .v-icon {
-            background-color: rgb(var(--v-theme-#{$color-name}));
-            color: rgb(var(--v-theme-on-#{$color-name})) !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-//  Button
-// Above map but opacity values as key and variant as value
-$btn-active-overlay-opacity: (
-  0.08: (
-    outlined,
-    flat,
-    text,
-    plain,
-  ),
-  0.24: (
-    tonal,
-  ),
-);
-$btn-hover-overlay-opacity: (
-  0.1: (
-    elevated,
-  ),
-  0.08: (
-    outlined,
-    flat,
-    text,
-    plain,
-  ),
-  0.24: (
-    tonal,
-  ),
-);
-
-.v-btn {
-  transform: scale(1.001);
-
-  // ℹ️ This is necessary because as we have darker overlay on hover for elevated variant, button text doesn't get dimmed
-  // This style is already applied to `.v-icon`
-  .v-btn__content {
-    z-index: 0;
-  }
-
-  &:active {
-    transform: scale(0.98);
-  }
-
-  // Set icon size to 18px for default button
-  .v-icon {
-    --v-icon-size-multiplier: 0.799407846;
-  }
-
-  // Add transition on hover
-  &:not(.v-btn--loading) .v-btn__overlay {
-    transition: opacity 0.15s ease-in-out;
-    will-change: opacity;
-  }
-
-  /*
-    Loop over $btn-active-overlay-opacity map and add active styles for each variant.
-    Group variants with same opacity value.
-  */
-  @each $opacity, $variants in $btn-active-overlay-opacity {
-    $selectors: ();
-
-    // append each variant to selectors list
-    @each $variant in $variants {
-      $selectors: list.append($selectors, '&.v-btn--variant-#{$variant}:active > .v-btn__overlay,');
-    }
-
-    #{$selectors} {
-      opacity: $opacity;
-    }
-  }
-
-  /*
-    Loop over $btn-hover-overlay-opacity map and add hover styles for each variant.
-    Group variants with same opacity value.
-  */
-  @each $opacity, $variants in $btn-hover-overlay-opacity {
-    $selectors: ();
-
-    // append each variant to selectors list
-    @each $variant in $variants {
-      $selectors: list.append($selectors, '&.v-btn--variant-#{$variant}:hover > .v-btn__overlay,');
-    }
-
-    #{$selectors} {
-      opacity: $opacity;
-    }
-  }
-
-  // Default (elevated) button
-  &--variant-elevated,
-  &--variant-flat {
-    // We want darker background on hover instead of light
-    &:not(.v-btn--loading, .v-btn--disabled) .v-btn__overlay {
-      background-color: black;
-
-      // Disable transition because we are getting flash of black color when loading finishes
-      transition: none;
-    }
-  }
-
-  // Update background color of tonal button
-  &.v-btn--variant-tonal .v-btn__underlay {
-    opacity: 0.16;
-  }
-
-  // Button border-radius
-  &:not(.v-btn--icon).v-btn--size-x-small {
-    border-radius: 2px;
-  }
-
-  &:not(.v-btn--icon).v-btn--size-small {
-    border-radius: 4px;
-  }
-
-  &:not(.v-btn--icon).v-btn--size-large {
-    border-radius: 8px;
-  }
-
-  &:not(.v-btn--icon).v-btn--size-x-large {
-    border-radius: 10px;
-  }
-
-  &.bg-primary {
-    color: rgb(var(--v-theme-button-on-primary)) !important;
-  }
-}
-
-//  Badge
-.v-badge {
-  .v-badge__badge .v-icon {
-    font-size: 0.9375rem;
-  }
-}
-
-//  Checkbox
-.v-checkbox {
-  .v-label {
-    // We adjusted it to vertically align the label
-    line-height: 21px;
-  }
-
-  .v-input__details {
-    // Remove extra space below the label
-    min-block-size: unset !important;
-    padding-block-start: 0 !important;
-  }
-}
-
-//  Chip
-.v-chip {
-  .v-chip__close {
-    font-size: 0.8125rem;
-  }
-
-  .v-icon--start {
-    margin-inline-start: 0 !important;
-  }
-}
-
-//  checkbox size and box shadow
-.v-checkbox-btn {
-  &.v-selection-control--dirty {
-    .v-selection-control__input {
-      .v-icon.iconify--custom {
-        // ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG
-        // @include mixins.elevation(2);
-        filter: drop-shadow(map.get(vuetify.$shadow-key-umbra, 2));
-      }
-    }
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-selection-control__input {
-    /* stylelint-disable-next-line no-descending-specificity */
-    .v-icon.iconify--custom {
-      block-size: 1.125rem !important;
-      font-size: 1.125rem !important;
-      inline-size: 1.125rem !important;
-    }
-  }
-}
-
-//  Dialog
-.v-dialog {
-  // dialog custom close btn
-  .v-dialog-close-btn {
-    border-radius: 0.375rem;
-    background-color: rgb(var(--v-theme-surface)) !important;
-    block-size: 2rem;
-    inline-size: 2rem;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    transform: translate(0.5rem, -0.5rem);
-
-    @include layoutsMixins.rtl {
-      transform: translate(-0.5rem, -0.5rem);
-    }
-
-    &:hover {
-      background-color: rgb(var(--v-theme-gray-300)) !important;
-    }
-  }
-}
-
-//  Expansion panels
-.v-application.v-layout .v-application__wrap .v-expansion-panels {
-  // custom style for expansion panels
-  &.expansion-panels-width-border {
-    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    border-radius: 0.375rem;
-  }
-
-  .v-expansion-panel {
-    margin-block-start: 0 !important;
-
-    // expansion panel arrow font size
-    .v-expansion-panel-title {
-      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-      font-weight: 500;
-
-      .v-expansion-panel-title__icon {
-        transition: transform 0.2s ease-in-out;
-
-        .v-icon {
-          font-size: 1.25rem;
-        }
-      }
-    }
-
-    .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
-    &:not(.v-expansion-panels--variant-accordion) {
-      &.v-expansion-panel--active {
-        .v-expansion-panel__shadow {
-          @include mixins.elevation(7);
-        }
-      }
-    }
-  }
-
-  &:not(.no-icon-rotate) {
-    .v-expansion-panel {
-      .v-expansion-panel-title__icon {
-        .v-icon {
-          @include layoutsMixins.rtl {
-            transform: scaleX(-1);
-          }
-        }
-      }
-
-      &.v-expansion-panel--active {
-        .v-expansion-panel-title__icon {
-          transform: rotate(90deg);
-
-          @include layoutsMixins.rtl {
-            transform: rotate(-90deg);
-          }
-        }
-      }
-    }
-  }
-
-  &:not(.expansion-panels-width-border) {
-    .v-expansion-panel {
-      &:not(:last-child) {
-        margin-block-end: 0.5rem;
-      }
-
-      &:not(:first-child)::after {
-        content: none;
-      }
-
-      // ℹ️ we have to use below style of increase the specificity and override the default style
-      /* stylelint-disable-next-line no-descending-specificity */
-      &:first-child:not(:last-child),
-      &:not(:first-child, :last-child),
-      &:not(:first-child) {
-        border-radius: 0.375rem !important;
-      }
-    }
-  }
-}
-
-//  Field
-.v-field__input {
-  opacity: 1 !important;
-}
-
-//  Label
-// ℹ️ We need to increase the line height for vertically aligned text
-.v-field {
-  line-height: 23px;
-}
-
-//  List
-.v-list-item {
-  --v-hover-opacity: 0.08 !important;
-  cursor: pointer;
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-ripple__container {
-    display: none;
-  }
-
-  .v-checkbox-btn.v-selection-control--density-compact {
-    margin-inline-end: 0.5rem;
-  }
-
-  .v-list-item__overlay {
-    transition: none;
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  &.v-list-item--density-comfortable .v-icon {
-    font-size: 1.25rem;
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  &.v-list-item--density-compact .v-icon {
-    font-size: 1.125rem;
-  }
-
-  // Without this, we get light primary due to the opacity of currentColor (active list item has white color)
-  &.v-list-item--active > .v-list-item__overlay {
-    opacity: 0 !important;
-  }
-
-  &.v-list-item--active:not(.v-list-group__header) {
-    background-color: rgb(var(--v-nav-background));
-    color: rgb(var(--v-theme-on-primary));
-
-    .v-list-item-subtitle {
-      color: rgb(var(--v-theme-on-primary));
-    }
-  }
-
-  &[tabindex='0']:not(.v-list-item--active) {
-    &:hover,
-    &:focus-visible {
-      color: rgba(var(--v-theme-on-primary));
-
-      .v-list-item-subtitle {
-        color: rgb(var(--v-theme-primary));
-      }
-    }
-  }
-
-  &.v-list-item--active.v-list-group__header {
-    color: rgb(var(--v-theme-primary));
-  }
-
-  &.v-list-item--active {
-    .v-list-item__prepend {
-      .v-checkbox,
-      .v-checkbox-btn {
-        .v-selection-control__input > .v-icon {
-          rect {
-            fill: white;
-
-            + path {
-              stroke: rgb(var(--v-theme-primary));
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-//  Menu
-// Menu custom style
-.v-menu.v-overlay {
-  .v-overlay__content {
-    .v-list {
-      .v-list-item {
-        border-radius: 0.375rem;
-        margin-block: 0.25rem;
-        margin-inline: 0.5rem;
-        min-block-size: 2.375rem;
-
-        &:first-child {
-          margin-block-start: 0;
-        }
-
-        &:last-child {
-          margin-block-end: 0;
-        }
-      }
-
-      .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
-        padding-block: 0.5rem;
-      }
-    }
-  }
-}
-
-//  Pagination
-.v-pagination {
-  .v-pagination__list .v-pagination__item--is-active {
-    .v-btn {
-      background-color: rgb(var(--v-theme-primary));
-
-      .v-btn__underlay {
-        opacity: 1 !important;
-      }
-
-      .v-btn__content {
-        color: rgb(var(--v-theme-button-on-primary)) !important;
-      }
-    }
-  }
-
-  // Disable scale animation for button
-  .v-pagination__item {
-    .v-btn {
-      transform: scale(1) !important;
-
-      // We disabled transition because it looks ugly 🤮
-      transition-duration: 0s;
-
-      &:active {
-        transform: scale(1);
-      }
-    }
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-pagination__next,
-  .v-pagination__prev {
-    /* stylelint-disable-next-line no-descending-specificity */
-    .v-btn--icon .v-icon {
-      --v-icon-size-multiplier: 0.889;
-    }
-  }
-}
-
-//  Radio
-.v-radio,
-.v-radio-btn {
-  .v-selection-control__input {
-    .iconify--custom {
-      border-radius: 5rem;
-      block-size: 1.125rem !important;
-      font-size: 1.125rem !important;
-      inline-size: 1.125rem !important;
-    }
-  }
-
-  &.v-selection-control--dirty {
-    .v-selection-control__input {
-      .iconify--custom {
-        @include mixins.elevation(2);
-      }
-    }
-  }
-
-  .v-label {
-    line-height: 22px;
-  }
-}
-
-//  Radio, Checkbox
-.v-radio,
-.v-checkbox-btn {
-  &:not(.v-selection-control--dirty) {
-    .v-selection-control__input > svg {
-      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
-    }
-  }
-}
-
-//  Rating
-.v-rating {
-  .v-rating__wrapper {
-    .v-btn .v-icon {
-      --v-icon-size-multiplier: 1;
-    }
-
-    .v-btn--density-default {
-      --v-btn-height: 26px;
-    }
-
-    .v-btn--density-compact {
-      --v-btn-height: 30px;
-    }
-
-    .v-btn--density-comfortable {
-      --v-btn-height: 32px;
-    }
-  }
-}
-
-//  switch
-.v-switch.v-switch--inset {
-  .v-switch__track,
-  .v-selection-control__wrapper {
-    block-size: calc(1.125rem * 1.5);
-    inline-size: calc(1.875rem * 1.5);
-  }
-
-  .v-ripple__container {
-    opacity: 0;
-  }
-
-  &:not(.v-input--disabled) .v-switch__track {
-    border: 1px solid rgba(var(--v-border-color), var(--v-switch-opacity));
-    background-color: rgb(var(--v-theme-surface));
-    opacity: 1;
-  }
-
-  .v-selection-control__input {
-    transform: translateX(-8px);
-
-    --v-selection-control-size: 1.5rem;
-
-    .v-switch__thumb {
-      background: rgba(var(--v-theme-on-surface), var(--v-switch-opacity));
-      block-size: 1rem;
-      inline-size: 1rem;
-    }
-  }
-
-  .v-selection-control--dirty {
-    .v-switch__track {
-      border-color: rgba(var(--v-border-color), var(--v-switch-opacity));
-    }
-
-    @each $color-name in variables.$theme-colors-name {
-      .text-#{$color-name} {
-        .v-switch__track {
-          border-color: rgb(var(--v-theme-#{$color-name}));
-          background-color: rgb(var(--v-theme-#{$color-name}));
-        }
-      }
-    }
-
-    .v-selection-control__input {
-      transform: translateX(10px);
-
-      .v-switch__thumb {
-        background-color: #fff;
-      }
-    }
-  }
-
-  // disabled
-  &.v-input--disabled {
-    &:not(.v-input--dirty) {
-      .v-selection-control__input .v-switch__thumb {
-        background: rgba(var(--v-theme-on-surface), var(--v-switch-disabled-thumb-opacity));
-      }
-
-      .v-switch__track {
-        background-color: rgba(var(--v-theme-on-surface), var(--v-switch-disabled-track-opacity));
-      }
-    }
-
-    &.v-input--dirty {
-      .v-selection-control--disabled {
-        opacity: var(--v-switch-checked-disabled-opacity);
-      }
-    }
-  }
-}
-
-.v-switch.v-input,
-.v-checkbox-btn,
-.v-radio-btn,
-.v-radio {
-  --v-input-control-height: auto;
-
-  flex: unset;
-}
-
-//  Slider
-.v-slider-thumb {
-  border: 3px solid rgb(var(--v-theme-surface));
-  border-radius: 5rem;
-
-  @include mixins.elevation(3);
-}
-
-.v-slider-thumb__label {
-  background: vuetify.$tooltip-background-color !important;
-  color: rgb(var(--v-theme-on-primary)) !important;
-  font-weight: 500;
-}
-
-.v-slider.v-input--horizontal .v-slider-thumb__label::before {
-  border-block-start-color: vuetify.$tooltip-background-color !important;
-}
-
-.v-slider.v-input--vertical .v-slider-thumb__label::before {
-  border-inline-end-color: vuetify.$tooltip-background-color !important;
-}
-
-//  slider track opacity
-.v-slider-track__background--opacity {
-  opacity: 1 !important;
-}
-
-//  Table
-.v-table {
-  --v-table-row-height: 70px;
-  --v-table-header-height: 60px !important;
-
-  color: rgb(var(--v-theme-on-surface)) !important;
-
-  th {
-    color: rgb(var(--v-theme-on-surface)) !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.0625rem;
-    text-transform: uppercase;
-
-    .v-data-table-header__content {
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-}
-
-//  Tabs
-// v-tab with pill support
-.v-tabs {
-  &.v-tabs--vertical {
-    --v-tabs-height: 38px !important;
-
-    &:not(.v-tabs-pill) {
-      block-size: 100%;
-      border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-    }
-  }
-
-  &.v-tabs--horizontal:not(.v-tabs-pill) {
-    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-
-    .v-tab__slider {
-      block-size: 3px;
-    }
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-btn {
-    font-weight: 400;
-    transform: none !important;
-
-    &.v-btn--stacked {
-      /* stylelint-disable-next-line no-descending-specificity */
-      .v-icon {
-        --v-icon-size-multiplier: 1.1428571429;
-      }
-    }
-
-    /* stylelint-disable-next-line no-descending-specificity */
-    .v-btn__overlay,
-    .v-ripple__container {
-      opacity: 0 !important;
-    }
-
-    /* stylelint-disable-next-line no-descending-specificity */
-    .v-tab__slider {
-      inset-inline-end: 0;
-      inset-inline-start: unset;
-    }
-  }
-}
-
-//  Tab Pill
-.v-tabs.v-tabs-pill {
-  .v-tab--selected {
-    @include mixins.elevation(2);
-  }
-
-  &.v-slide-group,
-  .v-slide-group__container {
-    box-sizing: content-box;
-    padding: 1rem;
-    margin: -1rem;
-  }
-
-  .v-tab.v-btn {
-    &:hover {
-      color: rgba(var(--v-theme-primary));
-    }
-  }
-}
-
-//  Timeline
-.v-timeline {
-  .v-timeline-divider__dot {
-    background: none !important;
-
-    .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 icon only
-  &.v-timeline-icon-only {
-    .v-timeline-divider__dot {
-      .v-timeline-divider__inner-dot {
-        background: none;
-        box-shadow: none;
-
-        /* stylelint-disable-next-line no-descending-specificity */
-        .v-icon {
-          background: rgb(var(--v-theme-background));
-        }
-      }
-    }
-  }
-
-  // we have to override the default bg-color of the timeline dot in the card
-  .v-card:not(.v-card--variant-text, .v-card--variant-plain, .v-card--variant-outlined) & {
-    &.v-timeline-icon-only {
-      .v-timeline-divider__dot {
-        .v-timeline-divider__inner-dot {
-          /* stylelint-disable-next-line no-descending-specificity */
-          .v-icon {
-            background: rgb(var(--v-theme-surface));
-          }
-        }
-      }
-    }
-  }
-
-  .v-card.v-card--variant-tonal & {
-    &.v-timeline-icon-only {
-      .v-timeline-divider__dot {
-        .v-timeline-divider__inner-dot {
-          /* stylelint-disable-next-line no-descending-specificity */
-          .v-icon {
-            background: none;
-          }
-        }
-      }
-    }
-  }
-}
-.v-field--variant-outlined.v-field--focused .v-field__outline {
-  --v-field-border-width: 1px !important;
-}
-//  TextField, Select, AutoComplete, ComboBox, Textarea
-// ℹ️ We added .v-application to increase the specificity of the selector
-.v-application {
-  .app-text-field,
-  .app-select,
-  .app-autocomplete,
-  .app-combobox,
-  .app-textarea,
-  .app-picker-field {
-    .v-text-field .v-input__details {
-      padding-inline-start: 0;
-    }
-
-    .v-field--variant-outlined.v-field--focused .v-field__outline {
-      --v-field-border-width: 1px !important;
-    }
-
-    // Label
-    // .v-input {
-    //   line-height: 22px !important;
-    // }
-
-    // Settings 22px line height causes vertical alignment issues so we need to adjust the input line height
-    // .v-field__input {
-    //   line-height: 21px;
-    // }
-
-    // Density: comfortable
-    .v-input--density-comfortable {
-      .v-field {
-        input,
-        .v-select__selection-text {
-          font-size: 1.125rem;
-        }
-      }
-    }
-
-    // Density: default
-    .v-input--density-default {
-      .v-field {
-        input,
-        .v-select__selection-text {
-          font-size: 1.375rem;
-        }
-      }
-    }
-
-    // Placeholder transition
-    .v-field {
-      input,
-      .v-field__input {
-        &::placeholder {
-          transition: transform 0.2s ease-out;
-        }
-      }
-    }
-
-    .v-field--focused {
-      // @include elevation.elevation(1);
-      box-shadow: 0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12);
-    }
-  }
-
-  @mixin style-selectable-component($component-name) {
-    .app-#{$component-name} {
-      .v-#{$component-name}__selection {
-        line-height: 24px;
-        margin-block: 0 !important;
-      }
-
-      // Vertical alignment of placeholder & text
-      .v-#{$component-name} .v-field .v-field__input > input {
-        align-self: center;
-      }
-
-      // Chips
-      // .v-#{$component-name}.v-#{$component-name}--chips.v-#{$component-name}--selected {
-      .v-#{$component-name}.v-#{$component-name}--chips.v-input--dirty {
-        .v-#{$component-name}__selection {
-          margin: 0;
-        }
-
-        .v-field__input {
-          gap: 3px;
-        }
-
-        &.v-input--density-compact {
-          .v-field__input {
-            padding-inline-start: 0.5rem;
-          }
-        }
-
-        &.v-input--density-comfortable {
-          .v-field__input {
-            padding-inline-start: 0.75rem;
-          }
-        }
-
-        &.v-input--density-default {
-          .v-field__input {
-            padding-inline-start: 1rem;
-          }
-        }
-      }
-    }
-  }
-
-  @include style-selectable-component('autocomplete');
-  @include style-selectable-component('select');
-  @include style-selectable-component('combobox');
-
-  .v-input--density-compact {
-    .v-field__clearable,
-    .v-field__append-inner {
-      svg {
-        block-size: 0.8em;
-        inline-size: 0.8em;
-        margin-block-start: 0.15em;
-
-        // transform: scale(0.75);
-        // transform-origin: center;
-      }
-    }
-  }
-
-  // AutoComplete
-  @at-root {
-    .app-autocomplete__content {
-      .v-list-item--active {
-        .v-autocomplete__mask {
-          background: rgb(var(--v-theme-gray-300));
-        }
-      }
-
-      .v-theme--dark {
-        .v-list-item:not(.v-list-item--active) {
-          .v-autocomplete__mask {
-            background: #3b405c;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Style list differently when it's used in a components like select, menu etc
-.v-menu {
-  .v-list-item {
-    // Adjust padding of list item inside menu
-    padding-block: 8px !important;
-    padding-inline: 16px !important;
-  }
-}
-
-.app-inner-list {
-  // Hide checkboxes
-  .v-selection-control {
-    display: none;
-  }
-}
-
-// Hide resizer
-::-webkit-resizer {
-  background: transparent;
-}