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

.stars-sm {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAWklEQVR4AY3O0QbDQBCG0UNYQi0hhBJqr8Iy7/94vewYlp65/Ay//4WlLnQLt3BbeIRH5jBFPVMHmlHS0CRnSqdiT3GH1edb8RGmoy4GwrBhM4Qmebn8XDrwBW7xChrojlOZAAAAAElFTkSuQmCC);
  background-size: 14px 13px;
  height: 13px;
  top: 1px;
  width: 69px;
  background-repeat: repeat-x;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.stars-sm-inner {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAAqUlEQVR4AWLwySwkGv/YzgworgwwAIphGHqJXWgX6nl6q55o/GHxCX4bUx9hMK9JYwucFSmAubW2ZifED8Q7IXEgcmRqVNDsgBhBrAMSBJEiqwAGAaBRhiDvBk1A3mkRyb2CXSYLlmWFnbArffoMIrjS6qy3Sm/Z/068CPEbyKpKhfCDyA0yNE95MKtRGe9LiSz9O3hKclv6Y76ictQzqbmjyhIkyVi+8wCta5MKDP5AeAAAAABJRU5ErkJggg==);
  background-size: 14px 13px;
  height: 13px;
  top: 1px;
  background-repeat: repeat-x;
  display: block;
}

@layer components {

  .tab {
    @apply whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium data-[current=true]:border-teal-500 data-[current=true]:text-teal-600 data-[current=false]:border-transparent data-[current=false]:text-gray-500 hover:data-[current=false]:border-gray-300 hover:data-[current=false]:text-gray-700
  }


  .table {
    @apply min-w-full divide-y divide-gray-300;
  }

  .table th {
    @apply px-3 py-3.5 text-left text-sm font-medium text-gray-900;
  }

  .table th:first-child {
    @apply py-3.5 pl-4 pr-3;
  }

  .table th:last-child {
    @apply py-3.5 pr-4 pl-3;
  }

  .table th a {
    @apply flex items-center;
  }

  .table tbody tr {
    @apply text-sm text-gray-500 hover:bg-zinc-50;
  }

  .table tbody tr td:last-child {
    @apply w-1 relative text-right text-sm font-medium py-2 pl-3 pr-4;
  }

  .table tr:last-child {
    @apply lg:rounded-b-lg;
  }

  .table tr:last-child td:last-child {
    @apply lg:rounded-b-lg;
  }

  .table tr:last-child td:first-child {
    @apply lg:rounded-b-lg;
  }

  .table tr td>a,
  .table tr td>span {
    @apply block px-3 py-4
  }

  .table tr td:first-child>a,
  .table tr td:first-child>span {
    @apply block py-4 pl-4 pr-3
  }


  .table tbody {
    @apply divide-y divide-gray-200 bg-white;
  }

  .mobile-subnav-link {
    @apply flex min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-3 py-1 text-gray-700 outline-none focus-visible:ring-2 text-sm;
  }

  .form-label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .form-control {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6;
  }

  .btn {
    @apply rounded-md bg-black px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:opacity-50;
  }

  .editor-btn-success {
    @apply rounded bg-green-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600
  }

  .editor-btn-primary {
    @apply rounded bg-blue-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500
  }

  .editor-btn-danger {
    @apply rounded bg-red-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500
  }

  .editor-btn-white {
    @apply rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
  }

  .editor-form-control-sm {
    @apply text-xs rounded-md border-0 py-1 px-2 w-full text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-600
  }

  .slideover {
    @apply h-dvh max-h-dvh m-0 ml-auto bg-white text-left w-full sm:max-w-lg backdrop:bg-black/50 backdrop:ease-in-out backdrop:duration-500 transform transition ease-in-out duration-500;
  }

  .dialog {
    @apply rounded-lg bg-white text-left shadow-xl sm:w-full sm:max-w-lg backdrop:bg-black/50;
  }

}


.trix-content li {
  @apply list-disc
}

.trix-content a {
  @apply text-blue-600
}

.rich-text li {
  @apply list-disc ml-4
}

.rich-text h2 {
  @apply text-xl font-semibold tracking-tight text-gray-900
}

.rich-text a {
  @apply text-[--primary-color] underline font-medium
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0
}

[data-tippy-root] {
  max-width: calc(100vw - 10px)
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity
}

.tippy-box[data-placement^=top]>.tippy-arrow {
  bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
  top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
  right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
  left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1
}