html, body, #app {
    height: 100%;
}
body {
    @apply bg-grey-50;
}

:root, .black-popper {
    --popper-theme-background-color: #2B2B2B;
    --popper-theme-background-color-hover: #2B2B2B;
    --popper-theme-text-color: #ffffff;
    --popper-theme-border-width: 0px;
    --popper-theme-border-style: solid;
    --popper-theme-border-radius: 6px;
    --popper-theme-padding: 8px;
    --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}
/**
 * To use white-popper, wrap the Popper element in a div
 * with this class.
 */
.white-popper {
    --popper-theme-background-color: #ffffff;
    --popper-theme-background-color-hover: #ffffff;
    --popper-theme-text-color: #4A4A4A;
    --popper-theme-border-width: 1px;
    --popper-theme-border-style: solid;
    --popper-theme-border-color: #E6E6E6;
    --popper-theme-border-radius: 6px;
    --popper-theme-padding: 8px;
    --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}

/* SCROLLBARS */
:root {
    --scrollbar-track: transparent;
    --scrollbar-thumb: #8A8A8A;
    --scrollbar-thumb-hover: #6A6A6A;
}
/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 9999px;
    border: 3px solid var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}



/* TYPOGRAPHY */
h1 {
    @apply text-2xl;
}
h2 {
    @apply text-2xl font-semibold;
}
h3 {
    @apply text-xl font-semibold;
}
h4 {
    @apply text-lg font-semibold;
}
h5 {
    @apply text-sm font-semibold;
}
h6 {
    @apply text-sm font-semibold uppercase tracking-wider;
}

.label {
    @apply uppercase font-semibold tracking-wider;
}
.label-xs {
    @apply uppercase text-xs font-semibold tracking-wider;
}
label.is-disabled {
    @apply opacity-50;
}
label.field {
    @apply text-grey-600;
}

/* BUTTONS */
.button-primary {
    @apply text-primary hover:bg-grey-50 hover:px-2 hover:-mx-2 hover:py-1 hover:-my-1 hover:rounded-md;
}

.button-standard {
    @apply text-bodycopy hover:text-primary hover:bg-grey-50 hover:px-2 hover:-mx-2 hover:py-1 hover:-my-1 hover:rounded-md;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
    background: white;
    @apply border-grey-300 text-grey-800;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
    border-left: 0;
    border-bottom: 0;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
    border-top: 0;
    border-left: 0;
}

.p-calendar .p-button {
    background: white;
    border-left: 0;
    @apply border-grey-300 text-grey-800;
}

.selectbutton-sm > .p-button {
    @apply px-2 py-0;
}

.clickable-row:hover .open-close-button {
    @apply bg-grey-100 text-grey-700 rounded-full;
}

/* LINKS */
.link-default {
    @apply hover:bg-grey-100 hover:text-grey-800 hover:rounded-md;
}
.link-primary {
    @apply text-sm font-semibold text-primary hover:bg-grey-100 hover:rounded-md;
}

/* SPECIAL CLICKABLE */
/* this makes it so we can auto-blur buttons and anchors when they are clicked */
/* see App.vue for the e.target.blur() logic */
button div, button span, button i,
a div, a span, a i {
    pointer-events: none;
}

/* FORM */
.p-inputtext::placeholder {
    color: #AAAAAA;
}
.p-password-input {
    @apply w-full;
}
.p-inputtext.p-success.p-component {
    border-color: green;
}
.p-input-icon-left > i[class*='icon-'], .p-input-icon-right > i[class*='icon-'] {
    margin-top: -0.6rem;
}
.p-input-icon-left > i[class*='pi-'], .p-input-icon-right > i[class*='pi-'] {
    margin-top: -0.5rem;
}
.p-checkbox.p-component.is-disabled .p-checkbox-box.p-highlight {
    opacity: 0.5;
}

.p-autocomplete .p-autocomplete-multiple-container {
    width: 100%;
}

.p-checkbox .p-checkbox-box.p-highlight:has(svg.p-checkbox-icon[data-pc-section='uncheckicon']) {
    @apply bg-red-400 border-red-400;
}

/* THEME */
.card {
    @apply bg-white rounded-lg shadow-default;
}

.chip {
    @apply rounded-full text-center px-2;
}
.chip.is-primary {
    @apply text-primary bg-primary-light;
}
.chip.is-default {
    @apply bg-grey-100;
}
.chip.is-outline {
    @apply border rounded-full;
}

/* MESSAGES */
.p-message .p-message-text {
    @apply text-sm font-normal;
}

/* TOASTS */
.Vue-Toastification__toast {
    min-height: 48px;
    @apply font-sans p-4 rounded-md shadow-lg;
}
.Vue-Toastification__toast--default {
    @apply bg-teal-50 text-teal-700;
}
.Vue-Toastification__toast--info {
    @apply bg-teal-50 text-teal-700;
}
.Vue-Toastification__toast--success {
    @apply bg-green-50 text-green-700;
}
.Vue-Toastification__toast--error {
    @apply bg-red-50 text-red-700;
}
.Vue-Toastification__toast--warning {
    @apply bg-orange-50 text-orange-700;
}
.Vue-Toastification__toast--default .Vue-Toastification__close-button {
    @apply text-teal-700;
}
.Vue-Toastification__toast--info .Vue-Toastification__close-button {
    @apply text-teal-700;
}
.Vue-Toastification__toast--success .Vue-Toastification__close-button {
    @apply text-green-700;
}
.Vue-Toastification__toast--error .Vue-Toastification__close-button {
    @apply text-red-700;
}
.Vue-Toastification__toast--warning .Vue-Toastification__close-button {
    @apply text-orange-700;
}

/* MODALS */
.p-dialog .p-dialog-header {
    @apply !border-b border-grey-200;
}

/* MENUS */
.p-menu {
    @apply rounded-md;
}
.p-contextmenu {
    width: 14.5rem;
    @apply rounded-md;
}
.p-contextmenu .p-submenu-list {
    @apply rounded-md;
}