@import 'reactflow/dist/style.css';
@import '@vidstack/react/player/styles/default/theme.css';
@import '@vidstack/react/player/styles/default/layouts/audio.css';
@import '@vidstack/react/player/styles/default/layouts/video.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 14px;
}

a {
  @apply cursor-default no-underline !important;
}

button {
  @apply cursor-default focus:outline-none;
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}

::-webkit-input-placeholder {
  line-height: normal;
}

.border {
  background-clip: padding-box;
}

.player {
  --brand-color: #f5f5f5;
  --focus-color: #4e9cf6;
  --audio-brand: var(--brand-color);
  --audio-focus-ring-color: var(--focus-color);
  --audio-border-radius: 2px;
  --video-brand: var(--brand-color);
  --video-focus-ring-color: var(--focus-color);
  --video-border-radius: 8px;
  width: 100%;
}

.player[data-view-type='video'] {
  aspect-ratio: 16 /9;
}

.ProseMirror p.is-empty::before {
  @apply text-white/50;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror img.ProseMirror-selectednode {
  @apply outline-fuchsia-500;
}