@charset "UTF-8";
/*
  ℹ️ This function is helpful when we have multi dimensional value

  Assume we have padding variable `$nav-padding-horizontal: 10px;`
  With above variable let's say we use it in some style:
  ```scss
  .selector {
    margin-left: $nav-padding-horizontal;
  }
  ```

  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
  In this case above style will be invalid.

  This function will extract the left most value from the variable value.

  $nav-padding-horizontal: 10px; => 10px;
  $nav-padding-horizontal: 10px 15px; => 10px;

  This is safe:
  ```scss
  .selector {
    margin-left: get-first-value($nav-padding-horizontal);
  }
  ```
*/
/*
  TODO: Add docs on when to use placeholder vs when to use SASS variable

  Placeholder
    - When we want to keep customization to our self between templates use it

  Variables
    - When we want to allow customization from both user and our side
    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
*/
/*
    ❗ Heads up
    ==================
    Here we assume we will always use shorthand property which will apply same padding on four side
    This is because this have been used as value of top property by `.popper-content`
*/
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gap-0 {
  gap: 0;
}

.gap-x-0 {
  column-gap: 0;
}

.gap-y-0 {
  row-gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-x-1 {
  column-gap: 0.25rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-x-2 {
  column-gap: 0.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-3 {
  column-gap: 0.75rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-x-4 {
  column-gap: 1rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-5 {
  column-gap: 1.25rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-x-7 {
  column-gap: 1.75rem;
}

.gap-y-7 {
  row-gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-8 {
  column-gap: 2rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-x-9 {
  column-gap: 2.25rem;
}

.gap-y-9 {
  row-gap: 2.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-x-10 {
  column-gap: 2.5rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.gap-11 {
  gap: 2.75rem;
}

.gap-x-11 {
  column-gap: 2.75rem;
}

.gap-y-11 {
  row-gap: 2.75rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-x-12 {
  column-gap: 3rem;
}

.gap-y-12 {
  row-gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-x-14 {
  column-gap: 3.5rem;
}

.gap-y-14 {
  row-gap: 3.5rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-x-16 {
  column-gap: 4rem;
}

.gap-y-16 {
  row-gap: 4rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-x-20 {
  column-gap: 5rem;
}

.gap-y-20 {
  row-gap: 5rem;
}

.gap-24 {
  gap: 6rem;
}

.gap-x-24 {
  column-gap: 6rem;
}

.gap-y-24 {
  row-gap: 6rem;
}

.gap-28 {
  gap: 7rem;
}

.gap-x-28 {
  column-gap: 7rem;
}

.gap-y-28 {
  row-gap: 7rem;
}

.gap-32 {
  gap: 8rem;
}

.gap-x-32 {
  column-gap: 8rem;
}

.gap-y-32 {
  row-gap: 8rem;
}

.gap-36 {
  gap: 9rem;
}

.gap-x-36 {
  column-gap: 9rem;
}

.gap-y-36 {
  row-gap: 9rem;
}

.gap-40 {
  gap: 10rem;
}

.gap-x-40 {
  column-gap: 10rem;
}

.gap-y-40 {
  row-gap: 10rem;
}

.gap-44 {
  gap: 11rem;
}

.gap-x-44 {
  column-gap: 11rem;
}

.gap-y-44 {
  row-gap: 11rem;
}

.gap-48 {
  gap: 12rem;
}

.gap-x-48 {
  column-gap: 12rem;
}

.gap-y-48 {
  row-gap: 12rem;
}

.gap-52 {
  gap: 13rem;
}

.gap-x-52 {
  column-gap: 13rem;
}

.gap-y-52 {
  row-gap: 13rem;
}

.gap-56 {
  gap: 14rem;
}

.gap-x-56 {
  column-gap: 14rem;
}

.gap-y-56 {
  row-gap: 14rem;
}

.gap-60 {
  gap: 15rem;
}

.gap-x-60 {
  column-gap: 15rem;
}

.gap-y-60 {
  row-gap: 15rem;
}

.gap-64 {
  gap: 16rem;
}

.gap-x-64 {
  column-gap: 16rem;
}

.gap-y-64 {
  row-gap: 16rem;
}

.gap-72 {
  gap: 18rem;
}

.gap-x-72 {
  column-gap: 18rem;
}

.gap-y-72 {
  row-gap: 18rem;
}

.gap-80 {
  gap: 20rem;
}

.gap-x-80 {
  column-gap: 20rem;
}

.gap-y-80 {
  row-gap: 20rem;
}

.gap-96 {
  gap: 24rem;
}

.gap-x-96 {
  column-gap: 24rem;
}

.gap-y-96 {
  row-gap: 24rem;
}

.list-none {
  list-style-type: none;
}

.v-application__wrap {
  /* stylelint-disable-next-line liberty/use-logical-spec */
  min-height: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-button,
.text-overline,
.v-card-title {
  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

body,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.v-row .v-col .v-input__details,
.v-row [class^="v-col-*"] .v-input__details {
  margin-block-end: 0;
}

.v-btn--density-compact.v-btn--size-default .v-btn__content > svg {
  block-size: 22px;
  font-size: 22px;
  inline-size: 22px;
}

.v-card-text + .v-card-text {
  padding-block-start: 0 !important;
}

/*
  👉 Checkbox & Radio Ripple

  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
  Tested with checkbox & switches
*/
.v-checkbox.v-input,
.v-switch.v-input {
  --v-input-control-height: auto;
  flex: unset;
}

.v-selection-control--density-comfortable.v-checkbox-btn .v-selection-control__wrapper, .v-selection-control--density-comfortable.v-radio .v-selection-control__wrapper, .v-selection-control--density-comfortable.v-radio-btn .v-selection-control__wrapper {
  margin-inline-start: -0.5625rem;
}

.v-selection-control--density-compact.v-radio .v-selection-control__wrapper, .v-selection-control--density-compact.v-radio-btn .v-selection-control__wrapper, .v-selection-control--density-compact.v-checkbox-btn .v-selection-control__wrapper {
  margin-inline-start: -0.3125rem;
}

.v-selection-control--density-default.v-checkbox-btn .v-selection-control__wrapper, .v-selection-control--density-default.v-radio .v-selection-control__wrapper, .v-selection-control--density-default.v-radio-btn .v-selection-control__wrapper {
  margin-inline-start: -0.6875rem;
}

.v-radio-group .v-selection-control-group .v-radio:not(:last-child) {
  margin-inline-end: 0.9rem;
}

/*
  👉 Tabs
  Disable tab transition

  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.

  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
*/
.disable-tab-transition {
  overflow: unset !important;
}
.disable-tab-transition .v-window__container {
  block-size: auto !important;
}
.disable-tab-transition .v-window-item:not(.v-window-item--active) {
  display: none !important;
}
.disable-tab-transition .v-window__container .v-window-item {
  transform: none !important;
}

.v-list .v-list-item__prepend > .v-icon,
.v-list .v-list-item__append > .v-icon {
  opacity: var(--v-high-emphasis-opacity);
}

/*
  ℹ️ Custom class

  Remove list spacing inside card

  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
*/
.card-list {
  --v-card-list-gap: 20px;
}
.card-list.v-list {
  padding-block: 0;
}
.card-list .v-list-item {
  min-block-size: unset;
  min-block-size: auto !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}
.card-list .v-list-item > .v-ripple__container {
  opacity: 0;
}
.card-list .v-list-item:not(:last-child) {
  padding-block-end: var(--v-card-list-gap) !important;
}
.card-list .v-list-item:hover > .v-list-item__overlay,
.card-list .v-list-item:focus > .v-list-item__overlay,
.card-list .v-list-item:active > .v-list-item__overlay,
.card-list .v-list-item.active > .v-list-item__overlay {
  opacity: 0 !important;
}

.v-divider {
  color: rgb(var(--v-border-color));
}

.v-data-table {
  /* stylelint-disable-next-line no-descending-specificity */
}
.v-data-table .v-checkbox-btn .v-selection-control__wrapper {
  margin-inline-start: 0 !important;
}
.v-data-table .v-selection-control {
  display: flex !important;
}
.v-data-table .v-pagination {
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}

.v-data-table-footer {
  margin-block-start: 1rem;
}

.v-field:hover .v-field__outline {
  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
}

.v-label {
  opacity: 1 !important;
}
.v-label:not(.v-field-label--floating) {
  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.v-overlay__scrim,
.v-navigation-drawer__scrim {
  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
  opacity: 1 !important;
}

.v-messages {
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  opacity: 1 !important;
}

.v-alert__close .v-btn--icon .v-icon {
  --v-icon-size-multiplier: 1.5;
}

.v-badge__badge {
  display: flex;
  align-items: center;
}

.v-btn:focus-visible::after {
  opacity: 0 !important;
}

.v-input:not(.v-select--chips) .v-select__selection .v-chip {
  margin-block: 2px var(--select-chips-margin-bottom);
}

.v-card-subtitle,
.v-list-item-subtitle {
  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.v-field__input input::placeholder,
input.v-field__input::placeholder,
textarea.v-field__input::placeholder {
  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
  opacity: 1 !important;
}

body {
  font-size: 15px !important;
}

.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-overline,
.v-input {
  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.text-caption {
  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
}

.v-card-subtitle,
.text-subtitle-1,
.text-subtitle-2 {
  color: rgba(var(--v-theme-on-background), 0.55);
}

.v-input--density-compact input::placeholder {
  position: relative;
  inset-block-start: 1px;
}
