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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  trix-editor {
    @apply w-full;
  }

  trix-editor h1 {
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
    @apply leading-5 font-semibold mb-4;
  }

  trix-editor a:not(.no-underline) {
    @apply underline;
  }

  trix-editor a:visited {
    color: green;
  }

  trix-editor ul {
    list-style-type: disc;
    padding-left: 1rem;
  }

  trix-editor ol {
    list-style-type: decimal;
    padding-left: 1rem;
  }

  trix-editor pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 1.5em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto;
  }

  trix-editor blockquote {
    border: 0 solid #ccc;
    border-left-width: 0px;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em;
  }
}

#navbarCollapse li .ud-menu-scroll.active {
  @apply opacity-70;
}

.navbarTogglerActive > span:nth-child(1) {
  top: 7px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.navbarTogglerActive > span:nth-child(2) {
  opacity: 0;
}

.navbarTogglerActive > span:nth-child(3) {
  top: -8px;
  --tw-rotate: 135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:root {
  --fc-small-font-size: 0.85em;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
  --fc-neutral-text-color: #808080;
  --fc-border-color: #ddd;

  --fc-button-text-color: #fff;
  --fc-button-bg-color: #2c3e50;
  --fc-button-border-color: #2c3e50;
  --fc-button-hover-bg-color: #1e2b37;
  --fc-button-hover-border-color: #1a252f;
  --fc-button-active-bg-color: #1a252f;
  --fc-button-active-border-color: #151e27;

  --fc-event-bg-color: #51a2ff;
  --fc-event-border-color: #f1f2f4;
  --fc-event-text-color: #626f86;
  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

  --fc-more-link-bg-color: #d0d0d0;
  --fc-more-link-text-color: inherit;

  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;

  --fc-non-business-color: rgba(215, 215, 215, 0.3);
  --fc-bg-event-color: rgb(143, 223, 130);
  --fc-bg-event-opacity: 0.3;
  --fc-highlight-color: rgba(96, 165, 250, 0.3);
  --fc-today-bg-color: transparent;
  --fc-now-indicator-color: red;
}

.sortable-ghost-todo {
  @apply shadow outline outline-4 outline-blue-300 opacity-25;
}

.pagy {
  @apply flex items-center justify-between border-t border-gray-200 px-4 sm:px-0;
  a:not(.gap) {
    @apply inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium text-gray-500;
    &:hover {
      @apply border-gray-300 text-gray-700;
    }
    &:not([href]) {
      /* disabled links */
      @apply border-transparent text-gray-500;
    }
    &.current {
      @apply border-blue-500 text-blue-600;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}