@import 'tailwindcss';

@config '../../../tailwind.config.js';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}

html {
  @apply font-sans;
  font-size: 14px;
}

body {
  @apply w-full overflow-hidden;
  width: 400px;
  height: 600px;
}

.logged-in header {
  @apply absolute top-0 right-0 left-0 overflow-x-auto overflow-y-auto;
}

content::-webkit-scrollbar,
.multiselect .multiselect-dropdown::-webkit-scrollbar {
  @apply h-2 w-2;
}

content::-webkit-scrollbar-thumb,
.multiselect .multiselect-dropdown::-webkit-scrollbar-thumb {
  @apply rounded-full bg-indigo-500;
}

content::-webkit-scrollbar-track,
.multiselect .multiselect-dropdown::-webkit-scrollbar-track {
  @apply bg-indigo-50;
}

.login {
  height: 600px;
}

content {
  @apply absolute top-12 right-0 bottom-14 left-0 overflow-x-auto overflow-y-auto text-base;
}

.aliases-loader,
.recipients-loader {
  height: 488px;
}

.alias-status-background {
  height: 16px;
  width: 16px;
  min-height: 16px;
  min-width: 16px;
}

.alias-status-foreground {
  height: 8px;
  width: 8px;
}

.back-icon {
  height: 39px;
  width: 39px;
}

/* purgecss start ignore */
.vue-notification-wrapper .vue-notification {
  @apply mx-2 mb-2 text-center text-sm;
}

.vue-notification-wrapper .vue-notification.success {
  @apply border-green-600 bg-green-100 text-green-800;
}

.vue-notification-wrapper .vue-notification.error {
  @apply border-red-600 bg-red-100 text-red-800;
}

.vue-notification-wrapper .vue-notification.warn {
  @apply border-yellow-600 bg-yellow-100 text-yellow-800;
}

.multiselect .multiselect-tag {
  @apply bg-indigo-100 text-indigo-900;
}

.dark .multiselect {
  @apply bg-grey-700;
}

.dark .multiselect .multiselect-clear:hover .multiselect-clear-icon {
  @apply bg-white;
}

.dark .multiselect .multiselect-tags {
  @apply border-grey-500 bg-grey-700 text-white;
}

.dark .multiselect .multiselect-tags input {
  @apply bg-grey-700 text-white placeholder-grey-100;
}

.dark .multiselect .multiselect-dropdown {
  @apply border-grey-500 bg-grey-700 text-white;
}

.dark .multiselect .multiselect-placeholder {
  @apply text-grey-100;
}

/* purgecss end ignore */
