/* Fallback for old browsers that do not support Oklch colors */
@supports not (color: oklch(0 0 0)) {
  :root {
    --lck-thm-primary-40: var(--color-primary);
  }
  [data-theme="light"] {
    --lck-thm-primary10: #DDDDDD;
  }
  [data-theme="dark"] {
    --lck-thm-primary10: #444444;
  }
}

/* Polyfill for aspect-ratio in old browsers */
@supports not (aspect-ratio: 1 / 1) {
  .lck-ratio-1-1,
  .lck-ratio-16-9,
  .lck-ratio-14-10,
  .lck-ratio-270-16,
  .lck-ratio-16-10 {
    position: relative;
  }

  .lck-ratio-1-1:before,
  .lck-ratio-16-9:before,
  .lck-ratio-14-10:before,
  .lck-ratio-270-16:before,
  .lck-ratio-16-10:before {
    content: '';
    display: block;
  }

  .lck-ratio-1-1:before {
    padding-bottom:100%;
  }

  .lck-ratio-16-9:before {
    padding-bottom: 56.25%;
  }

  .lck-ratio-14-10:before {
    padding-bottom: 71.4286%;
  }

  .lck-ratio-270-16:before {
    padding-bottom: 5.9259%;
  }

  .lck-ratio-16-10:before {
    padding-bottom: 62.5%;
  }

  .lck-ratio-1-1 > *,
  .lck-ratio-16-9 > *,
  .lck-ratio-14-10 > *,
  .lck-ratio-270-16 > *,
  .lck-ratio-16-10 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Fallback for old browsers that do not support Tailwind layers */
@supports not (selector(:where(.lck-toggle))) {
  html, body {
    font-family: 'Nunito', sans-serif;
    color: var(--color-primary);
  }
  [data-theme="light"] {
    background: var(--color-bglight);
  }
  [data-theme="dark"] {
    background: var(--color-bgdark);
  }
  .h-4 {
    height: 1rem;
  }
  .hidden {
    display: none;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .items-center {
    align-items: center;
  }
  .text-center {
    text-align: center;
  }
  .text-sm {
    font-size: 0.875rem;
  }
  .w-full {
    width: 100%;
  }
  .font-bold {
    font-weight: 700;
  }
  .link {
    color: var(--color-primary);
  }
  .fill-base-content {
    fill: var(--color-base-content);
  }
  .checkbox, .toggle {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
  }
}

/* Hide the old browser warning for modern browsers */
@media (min-width: 220px) {
  #warning {
    display: none;
  }
}