/* The Lucia project.
   Copyright 2023-2026 DSP, inc.  All rights reserved.
   Authors:
     chiayin.kuo@dsp.im (chiayin), 2023/3/14
     cindy.chang@dsp.im (Cindy Chang), 2024/7/26

   Third-party vendor style overrides for Google Material
   Icons, vue-toast-notification, and PrimeVue components. */

/* import Google font icon */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* icon default set */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 40
}
.material-fill {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 40
}

/* vue-toast-notification */
.v-toast {
  @apply z-[99999]
}
.v-toast__item {
  @apply min-h-[48px] rounded-full
}
.v-toast__item .v-toast__text {
  @apply py-3
}

/* Primevue */
/* sidebar */
.p-sidebar-left {
  @apply ml-14
}
.p-sidebar-mask {
  height: calc(100vh - 104px) !important;
  top: 104px !important;
  z-index: 20;
}
.p-sidebar {
  @apply !shadow-[1px_0px_4px_rgba(0,0,0,0.25)]
}
.p-sidebar-header {
  @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
}
.p-sidebar-right .p-sidebar-header {
  @apply flex-row-reverse !justify-end text-neutral-500
}
.p-sidebar-right .p-sidebar {
  @apply !shadow-[-1px_0px_4px_rgba(0,0,0,0.25)]
}
/* inputswitch */
.p-inputswitch {
  @apply !w-11 !h-6
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  @apply !bg-primary
}
.p-inputswitch .p-inputswitch-slider:before {
  @apply !w-5 !h-5 !left-0.5
}
/* slider */
.p-slider .p-slider-handle {
  @apply !h-3.5 !w-3.5 !border !border-primary
}
.p-slider.p-slider-horizontal .p-slider-handle {
  @apply !-my-2
}
.p-slider.p-slider-horizontal {
  @apply !h-1
}
/* radio */
/* p-radiobutton
p-radiobutton-box
p-radiobutton-icon */
.p-radiobutton {
  @apply !align-text-top
}
.p-radiobutton-box {
  @apply !bg-neutral-10
}
.p-radiobutton-box .p-highlight:not(.p-disabled):hover {
  @apply !bg-neutral-10
}
.p-radiobutton-icon {
  @apply !bg-primary
}
/* Dialog */
.p-dialog-header {
  @apply !p-0 !px-4 !bg-neutral-100
}
.p-dialog-content {
  @apply !p-0
}
/* DataTable */
.p-datatable-resizable > .p-datatable-wrapper {
  @apply !overflow-x-visible
}
/* Override inline style overflow-auto so that thead can be positioned */
.p-datatable-wrapper {
  overflow: unset !important;
}
