@winchsa/ui 0.1.33 → 0.1.34

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

@@ -0,0 +1,1035 @@
+@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;
+}