/* @import 'actiontext.css'; */

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

trix-toolbar .trix-button--icon {
  height: 1.2em !important;
}

.btn-outline {
	@apply py-2 px-4 bg-white font-semibold border rounded-lg cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75;
}


.scrollbar {
overflow: overlay
}

/* total width */
.scrollbar::-webkit-scrollbar {
background-color: rgba(0,0,0,0);
width: 16px;
height: 16px;
z-index: 999999;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0);
}

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0);
border-radius:16px;
border:0px solid #fff;
}

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {
display:none;
}

/* scrollbar when element is hovered */
.scrollbar:hover::-webkit-scrollbar-thumb {
background-color: #a0a0a5;
border:4px solid #fff;
}

/* scrollbar when scrollbar is hovered */
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:4px solid #f4f4f4
}


 
label {
  @apply font-medium text-sm text-gray-600;
}

p {
  @apply pb-2;
}


summary.hide-marker {
  outline: none;
  /* Hides marker on Chrome */
  list-style: none;
}

summary.hide-marker::-webkit-details-marker {
  /* Hides marker on Safari */
  /*display: none;*/
}

.prose h1 {
  @apply text-xl;
}

.pretty p{
  @apply pb-4;
}

/*.dropzone {
  @apply border-2 border-dashed bg-blue-100 rounded-lg;
}*/

.draggable-dropzone--active {
  @apply bg-yellow-100;
}
.draggable-droppable--active {
  @apply bg-gray-100;
}

.draggable-droppable--occupied {
  @apply bg-red-100;
}

/*.draggable-container--over {
  @apply border border-dashed rounded-lg;
}
*/
.draggable-mirror {
  @apply opacity-50;
}

.draggable--original {
  @apply bg-gray-200 rounded-lg;
}

.draggable-source--is-dragging {
  @apply h-2 border-t-2 border-black text-white bg-white;
}

.draggable-source--is-dragging .handle {
  @apply hidden;
}

.flash {
  animation: appear-then-fade 5s 300ms both;
  [data-turbo-preview] & {
    display: none;
  }
}

@keyframes appear-then-fade {
  0%,100% { opacity: 0; }
  5%,60%  { opacity: 1; }
}

.task-description trix-editor a {
  @apply underline cursor-pointer;
}

.task-description .trix-button-group--history-tools {
  @apply hidden;
}

.task-description .trix-button--icon-decrease-nesting-level {
  @apply hidden;
}

.task-description .trix-button--icon-increase-nesting-level {
  @apply hidden;
}

.task-description  .trix-button--icon-strike {
  @apply hidden;
}


/*@layer base {*/
/*  .sortable-chosen {
    background-color: lightgray;
    display: block;*/
/*    max-width: 250px;*/
/*    max-height: 40px;
    overflow: hidden;
  }*/

/*  .sortable-ghost {
    visibility: hidden;
  }*/
/*}*/

/*.move {
  display: block;
  max-height: 40px;
  overflow: hidden;
  border-bottom: 1px solid lightgrey;
}*/


/* @media print {
  @page { size: landscape; }
} */
/*   body {-webkit-print-color-adjust: exact;} */
  
/*

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

*/

/*dialog:modal {
    overlay: auto !important;
}

dialog {
    position: absolute;
    inset-inline-start: 0px;
    inset-inline-end: 0px;
    width: fit-content;
    height: fit-content;
    background-color: canvas;
    color: canvastext;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 1em;
}


dialog:-internal-dialog-in-top-layer::backdrop {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.1);
}*/