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

@layer components {
  .hyphenate {
    hyphens: auto;
  }

  .text-title-border {
    @apply border-b border-black border-dotted;
  }

  .text-height {
    height: 1em;
    width: auto;
  }

  .sortable-drag-card {
    @apply card card-bordered card-compact bg-white;
    opacity: 0.8 !important;
  }

  .sortable-ghost-card {
    @apply indicator w-full;
  }

  .sortable-ghost-card .card {
    @apply border-accent;
  }

  .file-input::file-selector-button {
    @apply btn btn-xs;
  }

  .select-list {
    position: absolute;
    z-index: 999;
  }

  .input-group .solid-select-container * {
    border-radius: 0;
  }

  .tr-bg-transparent td,
  .tr-bg-transparent th {
    @apply bg-transparent;
  }
}

@layer base {
  .table:not(.table-responsive) td {
    word-break: break-word;
    @apply whitespace-normal;
  }

  td {
    @apply bg-clip-padding;
  }

  .ignore-white-space .white-space {
    @apply whitespace-nowrap;
  }

  /*
    Tailwind prose adds margin-bottom to * in some situations,
    firefox renders margin-bottom on <br> elements, chrome doesnt,
    margin-bottom on br is not ideal in all situations
  */
  .prose br {
    margin-bottom: 0;
  }

  @font-face {
    font-family: "Cantarell";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: "Regular";
    src: url("../node_modules/cantarell/cantarell.woff2") format("woff2");
  }
}