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

/* Trix */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* Trix */

button .show-when-disabled {
  display: none;
}

button[disabled] .show-when-disabled {
  display: initial;
}

button .show-when-enabled {
  display: initial;
}

button[disabled] .show-when-enabled {
  display: none;
}

* {
  touch-action: manipulation;
}

summary::marker {
  content: "";
}

summary::-webkit-details-marker {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 0.25rem;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* #arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
} */

.tooltip[data-popper-placement^="top"] > #arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^="bottom"] > #arrow {
  top: -4px;
}

.tooltip[data-popper-placement^="left"] > #arrow {
  right: -4px;
}

.tooltip[data-popper-placement^="right"] > #arrow {
  left: -4px;
}

.trix-content ul {
  list-style: disc;
}

.trix-content ol {
  list-style: decimal;
}

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

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

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@layer components {
  .tooltip {
    @apply bg-black text-white font-semibold py-1 px-2 text-xs rounded-md hidden whitespace-pre-wrap max-w-[200px];
  }

  .tooltip[data-show] {
    @apply block;
  }

  .btn {
    @apply text-white font-medium rounded-md text-sm w-full px-5 py-2 text-center cursor-pointer whitespace-nowrap block;
  }

  .label {
    @apply block mb-1 text-sm text-black font-semibold text-left aria-required:after:ml-0.5 aria-required:after:text-red-500 aria-required:after:content-['*'];
  }

  .select {
    /* @apply bg-white border text-black md:text-xs rounded-md !outline-none border-grey-light focus:border-grey block w-full p-2 */
    @apply appearance-none bg-white border text-black rounded-md text-sm !outline-none border-gray-600 w-full overflow-hidden p-2 pr-5 cursor-pointer;
  }

  .select {
    /* Arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem top 50%;
    background-size: 0.6rem auto;
  }

  .date-input {
    @apply bg-gray-400 border text-black md:text-xs rounded-lg !outline-none border-gray-600 focus:border-gray-500 block w-full p-1.5 md:p-2;
  }

  .checkbox {
    @apply w-5 bg-gray-400 border text-black text-sm rounded-lg !outline-none border-gray-600 hover:border-gray-500 p-2.5 cursor-pointer;
  }

  .active-tab {
    @apply border-primary font-semibold text-primary;
  }

  .inactive-tab {
    @apply border-transparent font-light text-primary;
  }

  .switch {
    @apply relative inline-block w-12 h-6 shrink-0;
  }

  .switch input {
    @apply opacity-0 w-0 h-0;
  }

  input:checked + .slider {
    @apply bg-primary-800;
  }

  input:focus + .slider {
    @apply shadow-primary-800;
  }

  .slider.round {
    @apply rounded-full;
  }

  .slider.round:before {
    @apply rounded-full;
  }

  .tippy-box[data-theme~="primary"] {
    @apply bg-primary text-white;
  }

  .tippy-content {
    @apply whitespace-pre-line;
  }

  /* .primary-opaque-gradient-to-bottom {
    background: linear-gradient(
      to bottom,
      theme("colors.white") 0%,
      theme("colors.white") 50%,
      theme("colors.primary-opaque") 50%,
      theme("colors.primary-opaque") 100%
    );
  } */

  .custom-select {
    @apply relative;
  }
  .input {
    @apply border border-gray-300 rounded-md w-full text-base focus-within:border-primary-600 flex justify-between items-center gap-x-2 has-[input:disabled]:bg-gray-100 has-[input:disabled]:cursor-not-allowed;
  }
  .input input,
  .input textarea,
  .input select {
    @apply w-full border-none focus:ring-0 bg-transparent p-0 disabled:cursor-not-allowed px-3 py-2;
  }
  /* Input types */
  .input--search {
    @apply bg-white rounded-xl border-none px-2;
  }
  .input--line {
    @apply border-0 rounded-none border-b-2 border-primary-600 !px-0;
  }
  /* Input sizes */
  .input--sm input {
    @apply px-2 py-1.5 !text-sm;
  }
  .input--lg input {
    @apply px-4 py-2.5 !text-lg;
  }
}