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

/*

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

*/

/* #media-gallery-thumb-swiper .swiper-slide .active-overlay {
  @apply hidden;
}

#media-gallery-thumb-swiper .swiper-slide.swiper-slide-thumb-active .active-overlay {
  @apply flex;
} */

#zuck-modal-content .story-viewer .slides .item > img { object-fit: contain; }
.story .item-link {
  font-family: 'Inter var', ui-sans-serif !important;
}

.story .item-link .name {
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem /* 20px */;
    font-weight: 700 !important;
}

.stories.snapgram .story > .item-link > .item-preview{
  padding: 3px !important;
  background: radial-gradient(ellipse at 70% 70%, #1DAF4E 8%, #AED453 42%, #0D9431 58%) !important;
}

.chat-profile-thumb .story .item-link .info {
  display: none !important;
}

.chat-profile-thumb .story .item-link .item-preview img {
  width: 40px !important;
  height: 40px !important;
  border-width: 2px !important;
}

.chat-profile-thumb .story .item-link .item-preview {
  width: 44px !important;
  height: 44px !important;
}

.chat-profile-thumb .story .item-link {
  width: 44px !important;
  height: 44px !important;
}

.chat-profile-thumb .stories.snapgram .story > .item-link > .item-preview{
  padding: 2px !important;
  background: radial-gradient(ellipse at 70% 70%, #1DAF4E 8%, #AED453 42%, #0D9431 58%) !important;
}

.chat-profile-thumb .story {
  width: 44px !important;
  height: 44px !important;
  margin-right: 8px !important;
}

/* Admin Dashboard Styling */
@layer components {

  .admin-dashboard {
    section.content-header { @apply px-2 md:px-0 }

    label { @apply font-medium text-gray-500 text-sm }
    p:not([class]) { @apply text-gray-900 text-sm }
    a:not([class]), .link {
      @apply text-gray-800 font-medium break-words align-baseline;
      background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);
      background-repeat: repeat-x;
      background-position: 0px 100%;
      background-size: 100% 1px;
    }

    .data-table { @apply border-collapse border w-full }
    .data-table tbody { @apply bg-gray-100 flex-1 sm:bg-white sm:flex-none text-sm }
    .data-table thead th { @apply p-1.5 text-left text-xs font-semibold }
    .data-table thead th.comments { @apply hidden md:block w-2 }
    .data-table tbody tr td.comments { @apply fixed right-12 md:sticky p-1 w-2 }
    .data-table thead tr { @apply hidden md:table-row bg-gray-100 }
    .data-table tbody tr { @apply m-2 grid grid-cols-2 bg-white rounded shadow md:m-0 border hover:bg-gray-100 sm:table-row mb-2 sm:mb-0 }
    .data-table tbody tr td { @apply px-2 py-1.5 text-gray-700 text-nowrap truncate align-baseline }
    .data-table tbody tr td.primary { @apply font-medium text-gray-900}
    .data-table tbody tr td label { @apply block md:hidden text-sm font-medium text-gray-500 }
    .data-table.table-wrap td { @apply text-wrap break-words }

    /* Can't add placeholder directly to .form-control https://stackoverflow.com/questions/59184942/tailwindcss-use-apply-with-placeholder-color */
    /* Below code also doesn't work */
    /* input::placeholder { @apply text-gray-400 } */

    .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 focus:ring-2 focus:ring-inset focus:ring-orange-600 text-sm sm:leading-6 }
    .form-group { @apply mt-4 first:mt-0 }
    .form-group-row { @apply mt-4 first:mt-0 }
    .form-group-row .form-group { @apply mt-0 }

    /* Button Sizes */
    .btn    { @apply inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-sm }
    .btn-xs { @apply inline-flex items-center gap-x-1.5 rounded px-2 py-1 text-xs font-semibold shadow-sm }
    .btn-sm { @apply inline-flex items-center gap-x-1.5 rounded px-2 py-1 text-sm font-semibold shadow-sm }
    .btn-md { @apply inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm }
    .btn-lg { @apply inline-flex items-center gap-x-1.5 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm }

    a[disabled] { @apply opacity-50 pointer-events-none}
    button[disabled] { @apply opacity-50 pointer-events-none}
    a.disabled { @apply opacity-50  pointer-events-none}
    button.disabled { @apply opacity-50 pointer-events-none}

    /* Main Buttons */
    .btn-text { @apply bg-white text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }
    .btn-text-soft { @apply bg-gray-100 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }
    .btn-text-outline { @apply bg-white text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }

    .btn-default { @apply border border-gray-300 bg-white ring-gray-600 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }
    .btn-default-soft { @apply border border-gray-200 bg-gray-100 ring-gray-600 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }
    .btn-default-outline { @apply border border-gray-300 bg-white ring-gray-600 text-gray-900 hover:bg-gray-50 focus-visible:outline-gray-600 }

    .btn-primary { @apply bg-orange-600 border-orange-500 text-white hover:bg-orange-400 focus-visible:outline-orange-400 }
    .btn-primary-soft { @apply bg-orange-200  text-orange-600 hover:bg-orange-300 }
    .btn-primary-outline { @apply text-orange-600 bg-white ring-1 ring-inset ring-orange-200 hover:ring-orange-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 }

    .btn-secondary { @apply bg-blue-600 border-blue-500 text-white hover:bg-blue-400 focus-visible:outline-blue-400 }
    .btn-secondary-soft { @apply bg-blue-200  text-blue-600 hover:bg-blue-300 }
    .btn-secondary-outline { @apply text-blue-600 bg-white ring-1 ring-inset ring-blue-200 hover:ring-blue-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 }

    .btn-success { @apply bg-green-600 border-green-500 text-white hover:bg-green-400 focus-visible:outline-green-400 }
    .btn-success-soft { @apply bg-green-200  text-green-600 hover:bg-green-300 }
    .btn-success-outline { @apply text-green-600 bg-white ring-1 ring-inset ring-green-200 hover:ring-green-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 }

    .btn-danger { @apply bg-red-600 border-red-500 text-white hover:bg-red-400 focus-visible:outline-red-400 }
    .btn-danger-soft { @apply bg-red-200  text-red-600 hover:bg-red-300 }
    .btn-danger-outline { @apply text-red-600 bg-white ring-1 ring-inset ring-red-200 hover:ring-red-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 }

    .btn-warning { @apply bg-yellow-500 border-yellow-500 text-white hover:bg-yellow-400 focus-visible:outline-yellow-400 }
    .btn-warning-soft { @apply bg-yellow-200  text-yellow-600 hover:bg-yellow-300 }
    .btn-warning-outline { @apply text-yellow-600 bg-white ring-1 ring-inset ring-yellow-200 hover:ring-yellow-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-600 }

    /* badges */
    .badge { @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium }
    .badge-sm { @apply inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium }

    /* ring-1 ring-inset */
    .badge-default-soft { @apply bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-700/10 }
    .badge-primary-soft { @apply bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-700/10 }
    .badge-secondary-soft { @apply bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 }
    .badge-success-soft { @apply bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 }
    .badge-danger-soft { @apply bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 }
    .badge-warning-soft { @apply bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20 }
    .badge-info-soft { @apply bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-600/20 }

    .badge-default { @apply bg-gray-500 text-white }
    .badge-primary { @apply bg-orange-500 text-white }
    .badge-secondary { @apply bg-blue-500 text-white }
    .badge-success { @apply bg-green-500 text-white  }
    .badge-danger { @apply bg-red-500 text-white }
    .badge-warning { @apply bg-yellow-500 text-white  }
    .badge-info { @apply bg-cyan-500 text-white  }

    .card {
      @apply bg-white overflow-visible shadow rounded-none md:rounded-lg flex-1;
    }

    .card > div {
      @apply px-5 py-4;
    }

    .paginate .gap { @apply px-2 py-1 font-medium text-gray-500 align-middle }

    .paginate .page-link { @apply px-2 py-1 font-medium align-middle }

    .progress-bar {
      width: 0%;
      will-change: width;
    }

    [data-stories-target="storyContainer"] {
      transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
      will-change: transform;
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      transform-origin: center center;
    }

    [data-stories-target="modal"] {
      transition: background-color 0.2s ease-out;
      overflow: hidden;
    }

    [data-stories-target="storyContent"] img,
    [data-stories-target="storyContent"] video {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Add slide effect animations */
    @keyframes slideNextIn {
      from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes slideNextOut {
      from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
      }
    }

    @keyframes slidePrevIn {
      from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
      }
      to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes slidePrevOut {
      from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }

    .cube-next-in {
      animation: slideNextIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      will-change: transform, opacity;
    }

    .cube-next-out {
      animation: slideNextOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      will-change: transform, opacity;
    }

    .cube-prev-in {
      animation: slidePrevIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      will-change: transform, opacity;
    }

    .cube-prev-out {
      animation: slidePrevOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      will-change: transform, opacity;
    }
  }
}