@import 'tailwindcss';

@import 'react-day-picker/style.css';

@import '@kubetail/ui';
@plugin 'fancy-ansi/plugin';

@source '../node_modules/@kubetail/ui/**/*.js';

@custom-variant dark (&:where(.dark, .dark *));

/**
 * Custom theme
 */

:root, .light {
  --accent: var(--color-blue-200);
  --elevated: var(--color-zinc-100);   /* color-bg-elevated */
  --strong: var(--color-zinc-200);     /* color-bg-strong */
}

.dark {
  --accent: var(--color-blue-800);
  --elevated: var(--color-zinc-800);   /* color-bg-elevated */
  --strong: var(--color-zinc-950);     /* color-bg-strong */
}

@theme inline {
  --color-elevated: var(--elevated);
  --color-strong: var(--strong);
  --color-chrome-divider: var(--chrome-300);
}

/**
 * Flash css
 */

@theme {
  --animate-flash-bg-green: flash-bg-green 1s ease-in-out;

  @keyframes flash-bg-green {
    0% {
      background-color: #bbf7d0;
    }

    100% {
      background-color: var(--color-background);
    }
  }
}

@utility no-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

@utility rounded-table-wrapper {
  @apply ring-0!;
  @apply shadow-none!;
  @apply inline-block;

  & table {
    @apply border-separate border-spacing-0;
  }
}

@utility rounded-thead {
  & tr:first-child th {
    @apply bg-elevated;
    @apply border-t;
  }

  & th:first-child {
    @apply border-l;
  }

  & th:last-child {
    @apply border-r;
  }

  & tr:first-child th:first-child {
    @apply rounded-tl-md;
  }

  & tr:first-child th:last-child {
    @apply rounded-tr-md;
  }
}

@utility rounded-tbody {
  @apply relative;

  & tr:first-child td {
    @apply border-t;
  }

  & tr:last-child td {
    @apply border-b;
  }

  & td:first-child {
    @apply border-l;
  }

  & td:last-child {
    @apply border-r;
  }

  & tr:last-child td:first-child {
    @apply rounded-bl-md;
  }

  & tr:last-child td:last-child {
    @apply rounded-br-md;
  }
}

@layer base {
  html {
    font-family: 'Roboto Flex Variable', Arial, Helvetica, sans-serif;
    @apply h-full;
  }

  body {
    @apply h-full;
  }

  #root {
    @apply h-full;
  }

  :root, .light {
    --ansi-black: var(--ansi-colors-vscode-black);
    --ansi-red: var(--ansi-colors-vscode-red);
    --ansi-green: var(--ansi-colors-vscode-green);
    --ansi-yellow: var(--ansi-colors-vscode-yellow);
    --ansi-blue: var(--ansi-colors-vscode-blue);
    --ansi-magenta: var(--ansi-colors-vscode-magenta);
    --ansi-cyan: var(--ansi-colors-vscode-cyan);
    --ansi-white: var(--ansi-colors-vscode-white);
    --ansi-bright-black: var(--ansi-colors-vscode-bright-black);
    --ansi-bright-red: var(--ansi-colors-vscode-bright-red);
    --ansi-bright-green: var(--ansi-colors-vscode-bright-green);
    --ansi-bright-yellow: var(--ansi-colors-vscode-bright-yellow);
    --ansi-bright-blue: var(--ansi-colors-vscode-bright-blue);
    --ansi-bright-magenta: var(--ansi-colors-vscode-magenta);
    --ansi-bright-cyan: var(--ansi-colors-vscode-cyan);
    --ansi-bright-white: var(--ansi-colors-vscode-white);
  }

  .dark {
    --ansi-black: var(--ansi-colors-xtermjs-black);
    --ansi-red: var(--ansi-colors-xtermjs-red);
    --ansi-green: var(--ansi-colors-xtermjs-green);
    --ansi-yellow: var(--ansi-colors-xtermjs-yellow);
    --ansi-blue: var(--ansi-colors-xtermjs-blue);
    --ansi-magenta: var(--ansi-colors-xtermjs-magenta);
    --ansi-cyan: var(--ansi-colors-xtermjs-cyan);
    --ansi-white: var(--ansi-colors-xtermjs-white);
    --ansi-bright-black: var(--ansi-colors-xtermjs-bright-black);
    --ansi-bright-red: var(--ansi-colors-xtermjs-bright-red);
    --ansi-bright-green: var(--ansi-colors-xtermjs-bright-green);
    --ansi-bright-yellow: var(--ansi-colors-xtermjs-bright-yellow);
    --ansi-bright-blue: var(--ansi-colors-xtermjs-bright-blue);
    --ansi-bright-magenta: var(--ansi-colors-xtermjs-magenta);
    --ansi-bright-cyan: var(--ansi-colors-xtermjs-cyan);
    --ansi-bright-white: var(--ansi-colors-xtermjs-white);
  }
}