@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400,500,600,700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..9100..9000&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');*/


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

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

@layer components {
  *, .text-default {
    font-family: 'Inter', sans-serif;
    font-weight: 400;

    @apply text-slate-800;
  }

  .x-cloak, [x-cloak] {
    @apply hidden;
  }

  [x-dev] {
    /* display: none; */
    @apply bg-red-50 border-red-200 text-red-800;
  }

  .branded::after {
    @apply text-accent;

    font-family: 'Poppins', sans-serif;
    content: '.';
    font-size: 1em;
  }

  .bg-pattern {
    background-image: radial-gradient(#d9d9d9 0.7px, #ffffff 0.5px);
    background-size: 0.7rem 0.7rem;
  }

  h1,h2,h3,h4,h5,h6, .font-title {
    @apply font-bold text-slate-800 mb-2;
    /*font-family: 'Poppins', sans-serif;*/
    font-family: "Epilogue", serif;
  }

  .title-apendix {
    @apply text-blue-700 text-xs font-semibold;
  }

  h1 { @apply text-4xl; }
  h2 { @apply text-3xl; }
  h3 { @apply text-2xl; }
  h4 { @apply text-xl; }
  h5 { @apply text-lg; }
  h6 { @apply text-base; }

  .list-disc, .list-decimal, .list-check {
    @apply list-inside;

    ::marker {
      @apply text-blue-700;
    }
  }

  hr {
    @apply my-8 border-t-2 border-slate-200 w-full;
  }

  p {
    @apply text-base text-slate-500;
  }

  a {
    @apply text-slate-700 hover:text-blue-700;
  }

  .underlined {
    /* @apply relative text-black w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-black after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center; */
  }

  b {
    @apply font-semibold;
  }

  i {
    color: inherit;

    &.bi {
      &::before {
        color: inherit;
      }
    }
  }

  label {
    @apply block text-sm text-slate-700 font-bold mb-1;
  }

  /* not submit nor checkbox nor radio */
  input[type="checkbox"], input[type="radio"] {
    @apply h-4 w-4 rounded border-slate-300 text-black shadow-sm focus:border-slate-700 focus:ring focus:ring-slate-700 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-slate-400 m-[2px] mr-2;
  }

  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), textarea, select, .StripeElement {
    @apply w-full py-3 px-4 border-2 border-solid border-slate-200 duration-200 rounded-md;

    &:focus {
      @apply ring ring-slate-700 ring-opacity-50 border-black;
    }
  }

  input[type="radio"] {
    @apply rounded-full;
  }

  input[type="color"] {
    @apply px-1 py-0.5 h-10;
  }

  input[disabled], textarea[disabled], select[disabled], .StripeElement--disabled {
    @apply bg-slate-50 text-slate-400 cursor-not-allowed;
  }

  .StripeElement--focus {
    @apply ring ring-slate-700 ring-opacity-50 border-black;
  }

  .StripeElement--invalid {
    @apply ring ring-red-100 ring-opacity-50 border-red-500;
  }

  .StripeElement--complete {
    @apply ring ring-green-100 ring-opacity-50 border-green-500;
  }

  .quote {
    @apply py-0 px-6 border-l-4 border-slate-200 border-r-0 border-y-0;
  }

  .card {
    @apply relative backdrop-blur-sm border-2 border-slate-200 px-6 py-5 rounded-lg bg-white;

    &.glow {
      @apply border-slate-500 ring ring-slate-200;
    }

    &.error, &.danger {
      @apply bg-red-50 border-red-200;
    }

    &.primary {
      @apply bg-slate-50 border-slate-200;
    }

    &.success {
      @apply bg-green-50 border-green-200;
    }

    &.warning {
      @apply bg-yellow-50 border-yellow-200;
    }

    &.info {
      @apply bg-blue-50 border-blue-200;
    }

    &.dark {
      @apply bg-slate-800 text-slate-50 border-slate-900;
    }
  }

  .alert {
    @apply flex flex-row justify-between my-4 p-4 text-sm text-blue-800 border-2 border-blue-300 rounded-md bg-blue-50 w-full;

    &.primary {
      @apply bg-slate-50 border-slate-200 text-slate-800;
    }

    &.info {
      @apply bg-blue-50 border-blue-200 text-blue-800;
    }

    &.success {
      @apply bg-green-50 border-green-200 text-green-800;
    }

    &.warning {
      @apply bg-yellow-50 border-yellow-200 text-yellow-800;
    }

    &.error, &.danger {
      @apply bg-red-50 border-red-200 text-red-800;
    }

    &.dark {
      @apply bg-slate-800 text-slate-50 border-slate-900;
    }

    &.light {
      @apply bg-slate-50 text-slate-800 border-slate-200;
    }
  }

  .badge {
    @apply inline-block rounded border-2 py-1 px-2.5 text-xs font-medium;

    &.tag {
      @apply absolute top-5 right-6;
    }

    &.sm {
      @apply py-0.5 px-1.5 text-xs;
    }

    &.lg {
      @apply py-1.5 px-2 text-sm;
    }

    &.primary {
      @apply bg-black text-white border-transparent;
    }

    &.secondary {
      @apply bg-slate-500 text-slate-50 border-transparent;
    }

    &.light {
      @apply bg-slate-100 text-slate-700 border-transparent;
    }

    &.info {
      @apply bg-blue-100 text-blue-700 border-transparent;
    }

    &.success {
      @apply bg-green-100 text-green-700 border-transparent;
    }

    &.warning {
      @apply bg-yellow-100 text-yellow-700 border-transparent;
    }

    &.danger, &.error {
      @apply bg-red-100 text-red-700 border-transparent;
    }

    &.stripe {
      @apply bg-[#eceaff] text-[#675dff] border-transparent;
    }
  }

  [type="submit"] { @apply cursor-pointer; }
  .button {
    @apply flex flex-row justify-center items-center gap-1 px-4 py-2 text-base transition-all duration-200 rounded-md cursor-pointer;

    &.xs {
      @apply px-2 py-1 text-xs rounded-md;
    }

    &.sm {
      @apply px-3 py-1.5 text-sm rounded-md;
    }

    &.lg {
      @apply px-5 py-3 text-lg;
    }

    &.xl {
      @apply px-6 py-4 text-xl;
    }

    &.primary {
      @apply bg-slate-900 text-gray-100 hover:bg-slate-800;

      &.outlined {
        @apply bg-transparent text-black border-2 border-black hover:bg-black hover:text-white;
      }
    }

    &.secondary {
      @apply bg-slate-200 text-slate-700 hover:bg-slate-300;

      &.outlined {
        @apply bg-transparent text-slate-700 border-2 border-slate-200 hover:bg-slate-200 hover:text-slate-800;
      }
    }

    &.light {
      @apply bg-slate-100 text-slate-700 hover:bg-slate-200;

      &.outlined {
        @apply bg-transparent text-slate-700 border-2 border-slate-200 hover:bg-slate-200 hover:text-slate-800;
      }
    }

    &.dark {
      @apply bg-slate-800 text-slate-50 hover:bg-slate-900;

      &.outlined {
        @apply bg-transparent text-slate-900 border-2 border-slate-900 hover:bg-slate-900 hover:text-slate-50;
      }
    }

    &.link {
      @apply bg-transparent text-black hover:bg-slate-200;

      &.bordered { @apply border-2 border-slate-200; }
    }

    &.danger, &.error {
      @apply bg-red-500 text-white hover:bg-red-600;

      &.outlined {
        @apply bg-transparent text-red-500 border-2 border-red-500 hover:bg-red-50;
      }
    }

    &.success {
      @apply bg-green-500 text-white hover:bg-green-600;

      &.outlined {
        @apply bg-transparent text-green-500 border-2 border-green-500 hover:bg-green-50;
      }
    }

    &.warning {
      @apply bg-yellow-500 text-white hover:bg-yellow-600;

      &.outlined {
        @apply bg-transparent text-yellow-500 border-2 border-yellow-500 hover:bg-yellow-50;
      }
    }

    &.info {
      @apply bg-blue-500 text-white hover:bg-blue-600;

      &.outlined {
        @apply bg-transparent text-blue-500 border-2 border-blue-500 hover:bg-blue-50;
      }
    }

    &[disabled]{
      @apply opacity-75 cursor-not-allowed;
    }
  }

  .divider { @apply border-t border-r border-slate-200; }
  .divider-horizontal { @apply border-t border-slate-200 mx-0 my-8 w-auto; }
  .divider-vertical { @apply border-r border-slate-200 mx-8 my-0 h-auto; }

  table {
    thead {
      th {
        @apply px-3 py-2 font-medium text-slate-900;
      }

      @apply bg-slate-50;
    }

    tbody {
      td {
        @apply px-3 py-2;
      }

      @apply divide-y divide-slate-100 border-t border-slate-100;
    }


    @apply w-full border-collapse bg-white text-left text-sm text-slate-500;
  }

  /* Devise */
  form {
    @apply flex flex-col gap-2;
  }

  .field {
    i, em {
      @apply text-sm text-slate-500;
    }

    @apply mb-0;
  }

  .fields-row {
    @apply flex flex-col md:flex-row gap-0 md:gap-8;

    .field {
      @apply w-full;
    }
  }

  .actions {
    @apply flex items-center justify-end gap-4;
  }

  /* Modal */
  body:has(.override-overflow) {
    @apply overflow-hidden;
  }

  /* Avatar */
  div.avatar {
    @apply bg-slate-800 text-white p-4 text-lg flex justify-center items-center leading-[0px] rounded w-8 h-8;

    &.sm { @apply h-6 w-6 text-base p-2; }
    &.lg { @apply h-12 w-12 text-2xl; }
    &.xl { @apply h-16 w-16 text-3xl; }
    &.xxl { @apply h-20 w-20 text-4xl; }
    &.xxxl { @apply h-24 w-24 text-5xl; }
    &.xxxxl { @apply h-32 w-32 text-6xl; }
  }

  img.avatar {
    @apply h-8 w-8 rounded-md object-cover object-center;
  }
  i.avatar {
    @apply h-8 w-8 rounded-md flex items-center justify-center bg-slate-800 text-white rounded-md;
  }

  .avatar {
    &.sm { @apply h-6 w-6 text-sm; }
    &.lg { @apply h-12 w-12 text-lg; }
    &.xl { @apply h-16 w-16 text-xl; }
    &.xxl { @apply h-20 w-20 text-2xl; }
    &.xxxl { @apply h-24 w-24 text-3xl; }
    &.xxxxl { @apply h-32 w-32 text-4xl; }

    &.light { @apply bg-slate-100 text-slate-800; }
    &.dark, &.primary { @apply bg-slate-800 text-slate-50; }
    &.accent { @apply bg-blue-50 text-blue-700; }
  }


  .mask {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .mask-squircle {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  }

  /* Dropdown */
  [x-data=dropdown] {
    @apply relative;
  }

  [x-bind=dropdownMenu] {
    @apply absolute mt-1 !p-0 z-30 w-max shadow-lg bg-white rounded-md border-2 border-slate-200 overflow-hidden;

    &.right {
      @apply origin-top-right right-0 justify-end;
    }

    &.left {
      @apply origin-top-left left-0 justify-start;
    }

    &.wide {
      .menu-item {
        @apply min-w-[12rem];
      }
    }

    .menu-item {
      justify-content: inherit;

      @apply flex flex-row items-center gap-1 px-4 py-3 text-base transition-all duration-200 cursor-pointer w-full text-left text-slate-800 hover:bg-slate-200 bg-white cursor-pointer border-none shadow-none overflow-hidden;

      &.wide {
        @apply justify-start min-w-[8rem];
      }
    }
  }

  [x-data="modal"] {
    .actions {
      display: none;
    }
  }

  #current_song {
    img {
      aspect-ratio: 16 / 9;

      @apply h-32 rounded-md;
    }
  }

  #live {
    p {
      * {
        color: inherit;
      }

      font-size: inherit;
    }

    iframe {
      @apply w-full h-full fixed top-0 left-0;
    }
  }

  #preview, .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */