/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer reset, theme, base, components, utilities;
@layer utilities {
  .xxs\:group-hover\:m-0 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xxs\:group-hover\:m-1 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xxs\:group-hover\:m-2 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xxs\:group-hover\:m-3 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xxs\:group-hover\:m-4 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xxs\:group-hover\:m-5 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xxs\:group-hover\:m-6 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xxs\:group-hover\:m-8 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xxs\:group-hover\:m-10 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xxs\:group-hover\:m-12 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xxs\:group-hover\:m-16 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xxs\:group-hover\:m-20 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xxs\:group-hover\:m-24 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xxs\:group-hover\:block {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xxs\:group-hover\:flex {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xxs\:group-hover\:grid {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xxs\:group-hover\:hidden {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xxs\:group-hover\:inline-block {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xxs\:group-hover\:inline-flex {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xxs\:group-hover\:bg-black {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-50 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-100 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-200 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-300 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-400 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-500 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-600 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-700 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-800 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-gray-900 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xxs\:group-hover\:bg-white {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xxs\:group-hover\:p-0 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xxs\:group-hover\:p-1 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xxs\:group-hover\:p-2 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xxs\:group-hover\:p-3 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xxs\:group-hover\:p-4 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xxs\:group-hover\:p-5 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xxs\:group-hover\:p-6 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xxs\:group-hover\:p-8 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xxs\:group-hover\:p-10 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xxs\:group-hover\:p-12 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xxs\:group-hover\:p-16 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xxs\:group-hover\:p-20 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xxs\:group-hover\:p-24 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xxs\:group-hover\:text-center {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xxs\:group-hover\:text-left {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xxs\:group-hover\:text-right {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xxs\:group-hover\:text-black {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-50 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-100 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-200 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-300 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-400 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-500 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-600 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-700 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-800 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xxs\:group-hover\:text-gray-900 {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xxs\:group-hover\:text-white {
    @media (width >= 20rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xxs\:peer-checked\:m-0 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:peer-checked\:m-1 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:peer-checked\:m-2 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:peer-checked\:m-3 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:peer-checked\:m-4 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:peer-checked\:m-5 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:peer-checked\:m-6 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:peer-checked\:m-8 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:peer-checked\:m-10 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:peer-checked\:m-12 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:peer-checked\:m-16 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:peer-checked\:m-20 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:peer-checked\:m-24 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:peer-checked\:block {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .xxs\:peer-checked\:flex {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .xxs\:peer-checked\:grid {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .xxs\:peer-checked\:hidden {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .xxs\:peer-checked\:inline-block {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .xxs\:peer-checked\:inline-flex {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .xxs\:peer-checked\:bg-black {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-50 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-100 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-200 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-300 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-400 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-500 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-600 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-700 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-800 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:peer-checked\:bg-gray-900 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:peer-checked\:bg-white {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:peer-checked\:p-0 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:peer-checked\:p-1 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:peer-checked\:p-2 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:peer-checked\:p-3 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:peer-checked\:p-4 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:peer-checked\:p-5 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:peer-checked\:p-6 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:peer-checked\:p-8 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:peer-checked\:p-10 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:peer-checked\:p-12 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:peer-checked\:p-16 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:peer-checked\:p-20 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:peer-checked\:p-24 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:peer-checked\:text-center {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .xxs\:peer-checked\:text-left {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .xxs\:peer-checked\:text-right {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .xxs\:peer-checked\:text-black {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-50 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-100 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-200 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-300 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-400 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-500 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-600 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-700 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-800 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:peer-checked\:text-gray-900 {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:peer-checked\:text-white {
    @media (width >= 20rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .xxs\:visited\:m-0 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:visited\:m-1 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:visited\:m-2 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:visited\:m-3 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:visited\:m-4 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:visited\:m-5 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:visited\:m-6 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:visited\:m-8 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:visited\:m-10 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:visited\:m-12 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:visited\:m-16 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:visited\:m-20 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:visited\:m-24 {
    @media (width >= 20rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:visited\:block {
    @media (width >= 20rem) {
      &:visited {
        display: block;
      }
    }
  }
  .xxs\:visited\:flex {
    @media (width >= 20rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .xxs\:visited\:grid {
    @media (width >= 20rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .xxs\:visited\:hidden {
    @media (width >= 20rem) {
      &:visited {
        display: none;
      }
    }
  }
  .xxs\:visited\:inline-block {
    @media (width >= 20rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .xxs\:visited\:inline-flex {
    @media (width >= 20rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .xxs\:visited\:bg-black {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:visited\:bg-gray-50 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:visited\:bg-gray-100 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:visited\:bg-gray-200 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:visited\:bg-gray-300 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:visited\:bg-gray-400 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:visited\:bg-gray-500 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:visited\:bg-gray-600 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:visited\:bg-gray-700 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:visited\:bg-gray-800 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:visited\:bg-gray-900 {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:visited\:bg-white {
    @media (width >= 20rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:visited\:p-0 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:visited\:p-1 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:visited\:p-2 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:visited\:p-3 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:visited\:p-4 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:visited\:p-5 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:visited\:p-6 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:visited\:p-8 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:visited\:p-10 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:visited\:p-12 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:visited\:p-16 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:visited\:p-20 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:visited\:p-24 {
    @media (width >= 20rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:visited\:text-center {
    @media (width >= 20rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .xxs\:visited\:text-left {
    @media (width >= 20rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .xxs\:visited\:text-right {
    @media (width >= 20rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .xxs\:visited\:text-black {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .xxs\:visited\:text-gray-50 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:visited\:text-gray-100 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:visited\:text-gray-200 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:visited\:text-gray-300 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:visited\:text-gray-400 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:visited\:text-gray-500 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:visited\:text-gray-600 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:visited\:text-gray-700 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:visited\:text-gray-800 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:visited\:text-gray-900 {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:visited\:text-white {
    @media (width >= 20rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .xxs\:checked\:m-0 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:checked\:m-1 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:checked\:m-2 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:checked\:m-3 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:checked\:m-4 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:checked\:m-5 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:checked\:m-6 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:checked\:m-8 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:checked\:m-10 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:checked\:m-12 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:checked\:m-16 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:checked\:m-20 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:checked\:m-24 {
    @media (width >= 20rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:checked\:block {
    @media (width >= 20rem) {
      &:checked {
        display: block;
      }
    }
  }
  .xxs\:checked\:flex {
    @media (width >= 20rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .xxs\:checked\:grid {
    @media (width >= 20rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .xxs\:checked\:hidden {
    @media (width >= 20rem) {
      &:checked {
        display: none;
      }
    }
  }
  .xxs\:checked\:inline-block {
    @media (width >= 20rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .xxs\:checked\:inline-flex {
    @media (width >= 20rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .xxs\:checked\:bg-black {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:checked\:bg-gray-50 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:checked\:bg-gray-100 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:checked\:bg-gray-200 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:checked\:bg-gray-300 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:checked\:bg-gray-400 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:checked\:bg-gray-500 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:checked\:bg-gray-600 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:checked\:bg-gray-700 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:checked\:bg-gray-800 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:checked\:bg-gray-900 {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:checked\:bg-white {
    @media (width >= 20rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:checked\:p-0 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:checked\:p-1 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:checked\:p-2 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:checked\:p-3 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:checked\:p-4 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:checked\:p-5 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:checked\:p-6 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:checked\:p-8 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:checked\:p-10 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:checked\:p-12 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:checked\:p-16 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:checked\:p-20 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:checked\:p-24 {
    @media (width >= 20rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:checked\:text-center {
    @media (width >= 20rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .xxs\:checked\:text-left {
    @media (width >= 20rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .xxs\:checked\:text-right {
    @media (width >= 20rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .xxs\:checked\:text-black {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .xxs\:checked\:text-gray-50 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:checked\:text-gray-100 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:checked\:text-gray-200 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:checked\:text-gray-300 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:checked\:text-gray-400 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:checked\:text-gray-500 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:checked\:text-gray-600 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:checked\:text-gray-700 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:checked\:text-gray-800 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:checked\:text-gray-900 {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:checked\:text-white {
    @media (width >= 20rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .xxs\:focus-within\:m-0 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus-within\:m-1 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus-within\:m-2 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus-within\:m-3 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus-within\:m-4 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus-within\:m-5 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus-within\:m-6 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus-within\:m-8 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus-within\:m-10 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus-within\:m-12 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus-within\:m-16 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus-within\:m-20 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus-within\:m-24 {
    @media (width >= 20rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus-within\:block {
    @media (width >= 20rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .xxs\:focus-within\:flex {
    @media (width >= 20rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .xxs\:focus-within\:grid {
    @media (width >= 20rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .xxs\:focus-within\:hidden {
    @media (width >= 20rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .xxs\:focus-within\:inline-block {
    @media (width >= 20rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .xxs\:focus-within\:inline-flex {
    @media (width >= 20rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .xxs\:focus-within\:bg-black {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-50 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-100 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-200 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-300 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-400 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-500 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-600 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-700 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-800 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus-within\:bg-gray-900 {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus-within\:bg-white {
    @media (width >= 20rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:focus-within\:p-0 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus-within\:p-1 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus-within\:p-2 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus-within\:p-3 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus-within\:p-4 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus-within\:p-5 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus-within\:p-6 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus-within\:p-8 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus-within\:p-10 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus-within\:p-12 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus-within\:p-16 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus-within\:p-20 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus-within\:p-24 {
    @media (width >= 20rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus-within\:text-center {
    @media (width >= 20rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .xxs\:focus-within\:text-left {
    @media (width >= 20rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .xxs\:focus-within\:text-right {
    @media (width >= 20rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .xxs\:focus-within\:text-black {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .xxs\:focus-within\:text-gray-50 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus-within\:text-gray-100 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus-within\:text-gray-200 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus-within\:text-gray-300 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus-within\:text-gray-400 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus-within\:text-gray-500 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus-within\:text-gray-600 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus-within\:text-gray-700 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus-within\:text-gray-800 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus-within\:text-gray-900 {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus-within\:text-white {
    @media (width >= 20rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .xxs\:hover\:m-0 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xxs\:hover\:m-1 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xxs\:hover\:m-2 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xxs\:hover\:m-3 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xxs\:hover\:m-4 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xxs\:hover\:m-5 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xxs\:hover\:m-6 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xxs\:hover\:m-8 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xxs\:hover\:m-10 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xxs\:hover\:m-12 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xxs\:hover\:m-16 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xxs\:hover\:m-20 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xxs\:hover\:m-24 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xxs\:hover\:block {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xxs\:hover\:flex {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xxs\:hover\:grid {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xxs\:hover\:hidden {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xxs\:hover\:inline-block {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xxs\:hover\:inline-flex {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xxs\:hover\:bg-black {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-50 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-100 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-200 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-300 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-400 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-500 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-600 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-700 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-800 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xxs\:hover\:bg-gray-900 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xxs\:hover\:bg-white {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xxs\:hover\:p-0 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xxs\:hover\:p-1 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xxs\:hover\:p-2 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xxs\:hover\:p-3 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xxs\:hover\:p-4 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xxs\:hover\:p-5 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xxs\:hover\:p-6 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xxs\:hover\:p-8 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xxs\:hover\:p-10 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xxs\:hover\:p-12 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xxs\:hover\:p-16 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xxs\:hover\:p-20 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xxs\:hover\:p-24 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xxs\:hover\:text-center {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xxs\:hover\:text-left {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xxs\:hover\:text-right {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xxs\:hover\:text-black {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-50 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-100 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-200 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-300 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-400 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-500 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-600 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-700 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-800 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xxs\:hover\:text-gray-900 {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xxs\:hover\:text-white {
    @media (width >= 20rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xxs\:focus\:m-0 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus\:m-1 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus\:m-2 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus\:m-3 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus\:m-4 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus\:m-5 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus\:m-6 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus\:m-8 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus\:m-10 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus\:m-12 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus\:m-16 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus\:m-20 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus\:m-24 {
    @media (width >= 20rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus\:block {
    @media (width >= 20rem) {
      &:focus {
        display: block;
      }
    }
  }
  .xxs\:focus\:flex {
    @media (width >= 20rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .xxs\:focus\:grid {
    @media (width >= 20rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .xxs\:focus\:hidden {
    @media (width >= 20rem) {
      &:focus {
        display: none;
      }
    }
  }
  .xxs\:focus\:inline-block {
    @media (width >= 20rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .xxs\:focus\:inline-flex {
    @media (width >= 20rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .xxs\:focus\:bg-black {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:focus\:bg-gray-50 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus\:bg-gray-100 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus\:bg-gray-200 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus\:bg-gray-300 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus\:bg-gray-400 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus\:bg-gray-500 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus\:bg-gray-600 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus\:bg-gray-700 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus\:bg-gray-800 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus\:bg-gray-900 {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus\:bg-white {
    @media (width >= 20rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:focus\:p-0 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus\:p-1 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus\:p-2 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus\:p-3 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus\:p-4 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus\:p-5 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus\:p-6 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus\:p-8 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus\:p-10 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus\:p-12 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus\:p-16 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus\:p-20 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus\:p-24 {
    @media (width >= 20rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus\:text-center {
    @media (width >= 20rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .xxs\:focus\:text-left {
    @media (width >= 20rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .xxs\:focus\:text-right {
    @media (width >= 20rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .xxs\:focus\:text-black {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .xxs\:focus\:text-gray-50 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus\:text-gray-100 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus\:text-gray-200 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus\:text-gray-300 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus\:text-gray-400 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus\:text-gray-500 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus\:text-gray-600 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus\:text-gray-700 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus\:text-gray-800 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus\:text-gray-900 {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus\:text-white {
    @media (width >= 20rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .xxs\:focus-visible\:m-0 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus-visible\:m-1 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus-visible\:m-2 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus-visible\:m-3 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus-visible\:m-4 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus-visible\:m-5 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus-visible\:m-6 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus-visible\:m-8 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus-visible\:m-10 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus-visible\:m-12 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus-visible\:m-16 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus-visible\:m-20 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus-visible\:m-24 {
    @media (width >= 20rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus-visible\:block {
    @media (width >= 20rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .xxs\:focus-visible\:flex {
    @media (width >= 20rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .xxs\:focus-visible\:grid {
    @media (width >= 20rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .xxs\:focus-visible\:hidden {
    @media (width >= 20rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .xxs\:focus-visible\:inline-block {
    @media (width >= 20rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .xxs\:focus-visible\:inline-flex {
    @media (width >= 20rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .xxs\:focus-visible\:bg-black {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-50 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-100 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-200 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-300 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-400 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-500 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-600 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-700 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-800 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus-visible\:bg-gray-900 {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus-visible\:bg-white {
    @media (width >= 20rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:focus-visible\:p-0 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:focus-visible\:p-1 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:focus-visible\:p-2 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:focus-visible\:p-3 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:focus-visible\:p-4 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:focus-visible\:p-5 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:focus-visible\:p-6 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:focus-visible\:p-8 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:focus-visible\:p-10 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:focus-visible\:p-12 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:focus-visible\:p-16 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:focus-visible\:p-20 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:focus-visible\:p-24 {
    @media (width >= 20rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:focus-visible\:text-center {
    @media (width >= 20rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .xxs\:focus-visible\:text-left {
    @media (width >= 20rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .xxs\:focus-visible\:text-right {
    @media (width >= 20rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .xxs\:focus-visible\:text-black {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-50 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-100 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-200 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-300 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-400 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-500 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-600 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-700 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-800 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:focus-visible\:text-gray-900 {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:focus-visible\:text-white {
    @media (width >= 20rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .xxs\:active\:m-0 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:active\:m-1 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:active\:m-2 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:active\:m-3 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:active\:m-4 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:active\:m-5 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:active\:m-6 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:active\:m-8 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:active\:m-10 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:active\:m-12 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:active\:m-16 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:active\:m-20 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:active\:m-24 {
    @media (width >= 20rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:active\:block {
    @media (width >= 20rem) {
      &:active {
        display: block;
      }
    }
  }
  .xxs\:active\:flex {
    @media (width >= 20rem) {
      &:active {
        display: flex;
      }
    }
  }
  .xxs\:active\:grid {
    @media (width >= 20rem) {
      &:active {
        display: grid;
      }
    }
  }
  .xxs\:active\:hidden {
    @media (width >= 20rem) {
      &:active {
        display: none;
      }
    }
  }
  .xxs\:active\:inline-block {
    @media (width >= 20rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .xxs\:active\:inline-flex {
    @media (width >= 20rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .xxs\:active\:bg-black {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:active\:bg-gray-50 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:active\:bg-gray-100 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:active\:bg-gray-200 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:active\:bg-gray-300 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:active\:bg-gray-400 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:active\:bg-gray-500 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:active\:bg-gray-600 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:active\:bg-gray-700 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:active\:bg-gray-800 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:active\:bg-gray-900 {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:active\:bg-white {
    @media (width >= 20rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:active\:p-0 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:active\:p-1 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:active\:p-2 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:active\:p-3 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:active\:p-4 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:active\:p-5 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:active\:p-6 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:active\:p-8 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:active\:p-10 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:active\:p-12 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:active\:p-16 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:active\:p-20 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:active\:p-24 {
    @media (width >= 20rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:active\:text-center {
    @media (width >= 20rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .xxs\:active\:text-left {
    @media (width >= 20rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .xxs\:active\:text-right {
    @media (width >= 20rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .xxs\:active\:text-black {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .xxs\:active\:text-gray-50 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:active\:text-gray-100 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:active\:text-gray-200 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:active\:text-gray-300 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:active\:text-gray-400 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:active\:text-gray-500 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:active\:text-gray-600 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:active\:text-gray-700 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:active\:text-gray-800 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:active\:text-gray-900 {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:active\:text-white {
    @media (width >= 20rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .xxs\:disabled\:m-0 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:disabled\:m-1 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:disabled\:m-2 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:disabled\:m-3 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:disabled\:m-4 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:disabled\:m-5 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:disabled\:m-6 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:disabled\:m-8 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:disabled\:m-10 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:disabled\:m-12 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:disabled\:m-16 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:disabled\:m-20 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:disabled\:m-24 {
    @media (width >= 20rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:disabled\:block {
    @media (width >= 20rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .xxs\:disabled\:flex {
    @media (width >= 20rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .xxs\:disabled\:grid {
    @media (width >= 20rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .xxs\:disabled\:hidden {
    @media (width >= 20rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .xxs\:disabled\:inline-block {
    @media (width >= 20rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .xxs\:disabled\:inline-flex {
    @media (width >= 20rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .xxs\:disabled\:bg-black {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .xxs\:disabled\:bg-gray-50 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xxs\:disabled\:bg-gray-100 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xxs\:disabled\:bg-gray-200 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xxs\:disabled\:bg-gray-300 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xxs\:disabled\:bg-gray-400 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xxs\:disabled\:bg-gray-500 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xxs\:disabled\:bg-gray-600 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xxs\:disabled\:bg-gray-700 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xxs\:disabled\:bg-gray-800 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xxs\:disabled\:bg-gray-900 {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xxs\:disabled\:bg-white {
    @media (width >= 20rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .xxs\:disabled\:p-0 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xxs\:disabled\:p-1 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xxs\:disabled\:p-2 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xxs\:disabled\:p-3 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xxs\:disabled\:p-4 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xxs\:disabled\:p-5 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xxs\:disabled\:p-6 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xxs\:disabled\:p-8 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xxs\:disabled\:p-10 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xxs\:disabled\:p-12 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xxs\:disabled\:p-16 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xxs\:disabled\:p-20 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xxs\:disabled\:p-24 {
    @media (width >= 20rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xxs\:disabled\:text-center {
    @media (width >= 20rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .xxs\:disabled\:text-left {
    @media (width >= 20rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .xxs\:disabled\:text-right {
    @media (width >= 20rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .xxs\:disabled\:text-black {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .xxs\:disabled\:text-gray-50 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .xxs\:disabled\:text-gray-100 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .xxs\:disabled\:text-gray-200 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .xxs\:disabled\:text-gray-300 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .xxs\:disabled\:text-gray-400 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .xxs\:disabled\:text-gray-500 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .xxs\:disabled\:text-gray-600 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .xxs\:disabled\:text-gray-700 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .xxs\:disabled\:text-gray-800 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .xxs\:disabled\:text-gray-900 {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .xxs\:disabled\:text-white {
    @media (width >= 20rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .xs\:group-hover\:m-0 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xs\:group-hover\:m-1 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xs\:group-hover\:m-2 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xs\:group-hover\:m-3 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xs\:group-hover\:m-4 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xs\:group-hover\:m-5 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xs\:group-hover\:m-6 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xs\:group-hover\:m-8 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xs\:group-hover\:m-10 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xs\:group-hover\:m-12 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xs\:group-hover\:m-16 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xs\:group-hover\:m-20 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xs\:group-hover\:m-24 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xs\:group-hover\:block {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xs\:group-hover\:flex {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xs\:group-hover\:grid {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xs\:group-hover\:hidden {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xs\:group-hover\:inline-block {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xs\:group-hover\:inline-flex {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xs\:group-hover\:bg-black {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xs\:group-hover\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xs\:group-hover\:bg-white {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xs\:group-hover\:p-0 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xs\:group-hover\:p-1 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xs\:group-hover\:p-2 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xs\:group-hover\:p-3 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xs\:group-hover\:p-4 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xs\:group-hover\:p-5 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xs\:group-hover\:p-6 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xs\:group-hover\:p-8 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xs\:group-hover\:p-10 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xs\:group-hover\:p-12 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xs\:group-hover\:p-16 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xs\:group-hover\:p-20 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xs\:group-hover\:p-24 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xs\:group-hover\:text-center {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xs\:group-hover\:text-left {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xs\:group-hover\:text-right {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xs\:group-hover\:text-black {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xs\:group-hover\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xs\:group-hover\:text-white {
    @media (width >= 26.5625rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xs\:peer-checked\:m-0 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:peer-checked\:m-1 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:peer-checked\:m-2 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:peer-checked\:m-3 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:peer-checked\:m-4 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:peer-checked\:m-5 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:peer-checked\:m-6 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:peer-checked\:m-8 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:peer-checked\:m-10 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:peer-checked\:m-12 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:peer-checked\:m-16 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:peer-checked\:m-20 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:peer-checked\:m-24 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:peer-checked\:block {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .xs\:peer-checked\:flex {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .xs\:peer-checked\:grid {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .xs\:peer-checked\:hidden {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .xs\:peer-checked\:inline-block {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .xs\:peer-checked\:inline-flex {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .xs\:peer-checked\:bg-black {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:peer-checked\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:peer-checked\:bg-white {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:peer-checked\:p-0 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:peer-checked\:p-1 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:peer-checked\:p-2 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:peer-checked\:p-3 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:peer-checked\:p-4 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:peer-checked\:p-5 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:peer-checked\:p-6 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:peer-checked\:p-8 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:peer-checked\:p-10 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:peer-checked\:p-12 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:peer-checked\:p-16 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:peer-checked\:p-20 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:peer-checked\:p-24 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:peer-checked\:text-center {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .xs\:peer-checked\:text-left {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .xs\:peer-checked\:text-right {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .xs\:peer-checked\:text-black {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .xs\:peer-checked\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:peer-checked\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:peer-checked\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:peer-checked\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:peer-checked\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:peer-checked\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:peer-checked\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:peer-checked\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:peer-checked\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:peer-checked\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:peer-checked\:text-white {
    @media (width >= 26.5625rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .xs\:visited\:m-0 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:visited\:m-1 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:visited\:m-2 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:visited\:m-3 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:visited\:m-4 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:visited\:m-5 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:visited\:m-6 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:visited\:m-8 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:visited\:m-10 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:visited\:m-12 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:visited\:m-16 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:visited\:m-20 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:visited\:m-24 {
    @media (width >= 26.5625rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:visited\:block {
    @media (width >= 26.5625rem) {
      &:visited {
        display: block;
      }
    }
  }
  .xs\:visited\:flex {
    @media (width >= 26.5625rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .xs\:visited\:grid {
    @media (width >= 26.5625rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .xs\:visited\:hidden {
    @media (width >= 26.5625rem) {
      &:visited {
        display: none;
      }
    }
  }
  .xs\:visited\:inline-block {
    @media (width >= 26.5625rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .xs\:visited\:inline-flex {
    @media (width >= 26.5625rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .xs\:visited\:bg-black {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:visited\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:visited\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:visited\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:visited\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:visited\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:visited\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:visited\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:visited\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:visited\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:visited\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:visited\:bg-white {
    @media (width >= 26.5625rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:visited\:p-0 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:visited\:p-1 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:visited\:p-2 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:visited\:p-3 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:visited\:p-4 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:visited\:p-5 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:visited\:p-6 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:visited\:p-8 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:visited\:p-10 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:visited\:p-12 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:visited\:p-16 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:visited\:p-20 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:visited\:p-24 {
    @media (width >= 26.5625rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:visited\:text-center {
    @media (width >= 26.5625rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .xs\:visited\:text-left {
    @media (width >= 26.5625rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .xs\:visited\:text-right {
    @media (width >= 26.5625rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .xs\:visited\:text-black {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .xs\:visited\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:visited\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:visited\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:visited\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:visited\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:visited\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:visited\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:visited\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:visited\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:visited\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:visited\:text-white {
    @media (width >= 26.5625rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .xs\:checked\:m-0 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:checked\:m-1 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:checked\:m-2 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:checked\:m-3 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:checked\:m-4 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:checked\:m-5 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:checked\:m-6 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:checked\:m-8 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:checked\:m-10 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:checked\:m-12 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:checked\:m-16 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:checked\:m-20 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:checked\:m-24 {
    @media (width >= 26.5625rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:checked\:block {
    @media (width >= 26.5625rem) {
      &:checked {
        display: block;
      }
    }
  }
  .xs\:checked\:flex {
    @media (width >= 26.5625rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .xs\:checked\:grid {
    @media (width >= 26.5625rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .xs\:checked\:hidden {
    @media (width >= 26.5625rem) {
      &:checked {
        display: none;
      }
    }
  }
  .xs\:checked\:inline-block {
    @media (width >= 26.5625rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .xs\:checked\:inline-flex {
    @media (width >= 26.5625rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .xs\:checked\:bg-black {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:checked\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:checked\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:checked\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:checked\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:checked\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:checked\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:checked\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:checked\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:checked\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:checked\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:checked\:bg-white {
    @media (width >= 26.5625rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:checked\:p-0 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:checked\:p-1 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:checked\:p-2 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:checked\:p-3 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:checked\:p-4 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:checked\:p-5 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:checked\:p-6 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:checked\:p-8 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:checked\:p-10 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:checked\:p-12 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:checked\:p-16 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:checked\:p-20 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:checked\:p-24 {
    @media (width >= 26.5625rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:checked\:text-center {
    @media (width >= 26.5625rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .xs\:checked\:text-left {
    @media (width >= 26.5625rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .xs\:checked\:text-right {
    @media (width >= 26.5625rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .xs\:checked\:text-black {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .xs\:checked\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:checked\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:checked\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:checked\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:checked\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:checked\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:checked\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:checked\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:checked\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:checked\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:checked\:text-white {
    @media (width >= 26.5625rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .xs\:focus-within\:m-0 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus-within\:m-1 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus-within\:m-2 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus-within\:m-3 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus-within\:m-4 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus-within\:m-5 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus-within\:m-6 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus-within\:m-8 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus-within\:m-10 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus-within\:m-12 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus-within\:m-16 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus-within\:m-20 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus-within\:m-24 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus-within\:block {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .xs\:focus-within\:flex {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .xs\:focus-within\:grid {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .xs\:focus-within\:hidden {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .xs\:focus-within\:inline-block {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .xs\:focus-within\:inline-flex {
    @media (width >= 26.5625rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .xs\:focus-within\:bg-black {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:focus-within\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus-within\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus-within\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus-within\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus-within\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus-within\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus-within\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus-within\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus-within\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus-within\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus-within\:bg-white {
    @media (width >= 26.5625rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:focus-within\:p-0 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus-within\:p-1 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus-within\:p-2 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus-within\:p-3 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus-within\:p-4 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus-within\:p-5 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus-within\:p-6 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus-within\:p-8 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus-within\:p-10 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus-within\:p-12 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus-within\:p-16 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus-within\:p-20 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus-within\:p-24 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus-within\:text-center {
    @media (width >= 26.5625rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .xs\:focus-within\:text-left {
    @media (width >= 26.5625rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .xs\:focus-within\:text-right {
    @media (width >= 26.5625rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .xs\:focus-within\:text-black {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .xs\:focus-within\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus-within\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus-within\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus-within\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus-within\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus-within\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus-within\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus-within\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus-within\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus-within\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus-within\:text-white {
    @media (width >= 26.5625rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .xs\:hover\:m-0 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xs\:hover\:m-1 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xs\:hover\:m-2 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xs\:hover\:m-3 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xs\:hover\:m-4 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xs\:hover\:m-5 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xs\:hover\:m-6 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xs\:hover\:m-8 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xs\:hover\:m-10 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xs\:hover\:m-12 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xs\:hover\:m-16 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xs\:hover\:m-20 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xs\:hover\:m-24 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xs\:hover\:block {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xs\:hover\:flex {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xs\:hover\:grid {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xs\:hover\:hidden {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xs\:hover\:inline-block {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xs\:hover\:inline-flex {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xs\:hover\:bg-black {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xs\:hover\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xs\:hover\:bg-white {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xs\:hover\:p-0 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xs\:hover\:p-1 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xs\:hover\:p-2 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xs\:hover\:p-3 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xs\:hover\:p-4 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xs\:hover\:p-5 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xs\:hover\:p-6 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xs\:hover\:p-8 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xs\:hover\:p-10 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xs\:hover\:p-12 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xs\:hover\:p-16 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xs\:hover\:p-20 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xs\:hover\:p-24 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xs\:hover\:text-center {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xs\:hover\:text-left {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xs\:hover\:text-right {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xs\:hover\:text-black {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xs\:hover\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xs\:hover\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xs\:hover\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xs\:hover\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xs\:hover\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xs\:hover\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xs\:hover\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xs\:hover\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xs\:hover\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xs\:hover\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xs\:hover\:text-white {
    @media (width >= 26.5625rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xs\:focus\:m-0 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus\:m-1 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus\:m-2 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus\:m-3 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus\:m-4 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus\:m-5 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus\:m-6 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus\:m-8 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus\:m-10 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus\:m-12 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus\:m-16 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus\:m-20 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus\:m-24 {
    @media (width >= 26.5625rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus\:block {
    @media (width >= 26.5625rem) {
      &:focus {
        display: block;
      }
    }
  }
  .xs\:focus\:flex {
    @media (width >= 26.5625rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .xs\:focus\:grid {
    @media (width >= 26.5625rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .xs\:focus\:hidden {
    @media (width >= 26.5625rem) {
      &:focus {
        display: none;
      }
    }
  }
  .xs\:focus\:inline-block {
    @media (width >= 26.5625rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .xs\:focus\:inline-flex {
    @media (width >= 26.5625rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .xs\:focus\:bg-black {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:focus\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus\:bg-white {
    @media (width >= 26.5625rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:focus\:p-0 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus\:p-1 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus\:p-2 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus\:p-3 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus\:p-4 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus\:p-5 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus\:p-6 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus\:p-8 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus\:p-10 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus\:p-12 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus\:p-16 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus\:p-20 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus\:p-24 {
    @media (width >= 26.5625rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus\:text-center {
    @media (width >= 26.5625rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .xs\:focus\:text-left {
    @media (width >= 26.5625rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .xs\:focus\:text-right {
    @media (width >= 26.5625rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .xs\:focus\:text-black {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .xs\:focus\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus\:text-white {
    @media (width >= 26.5625rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .xs\:focus-visible\:m-0 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus-visible\:m-1 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus-visible\:m-2 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus-visible\:m-3 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus-visible\:m-4 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus-visible\:m-5 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus-visible\:m-6 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus-visible\:m-8 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus-visible\:m-10 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus-visible\:m-12 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus-visible\:m-16 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus-visible\:m-20 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus-visible\:m-24 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus-visible\:block {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .xs\:focus-visible\:flex {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .xs\:focus-visible\:grid {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .xs\:focus-visible\:hidden {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .xs\:focus-visible\:inline-block {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .xs\:focus-visible\:inline-flex {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .xs\:focus-visible\:bg-black {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus-visible\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus-visible\:bg-white {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:focus-visible\:p-0 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:focus-visible\:p-1 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:focus-visible\:p-2 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:focus-visible\:p-3 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:focus-visible\:p-4 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:focus-visible\:p-5 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:focus-visible\:p-6 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:focus-visible\:p-8 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:focus-visible\:p-10 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:focus-visible\:p-12 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:focus-visible\:p-16 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:focus-visible\:p-20 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:focus-visible\:p-24 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:focus-visible\:text-center {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .xs\:focus-visible\:text-left {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .xs\:focus-visible\:text-right {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .xs\:focus-visible\:text-black {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .xs\:focus-visible\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:focus-visible\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:focus-visible\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:focus-visible\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:focus-visible\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:focus-visible\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:focus-visible\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:focus-visible\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:focus-visible\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:focus-visible\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:focus-visible\:text-white {
    @media (width >= 26.5625rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .xs\:active\:m-0 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:active\:m-1 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:active\:m-2 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:active\:m-3 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:active\:m-4 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:active\:m-5 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:active\:m-6 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:active\:m-8 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:active\:m-10 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:active\:m-12 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:active\:m-16 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:active\:m-20 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:active\:m-24 {
    @media (width >= 26.5625rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:active\:block {
    @media (width >= 26.5625rem) {
      &:active {
        display: block;
      }
    }
  }
  .xs\:active\:flex {
    @media (width >= 26.5625rem) {
      &:active {
        display: flex;
      }
    }
  }
  .xs\:active\:grid {
    @media (width >= 26.5625rem) {
      &:active {
        display: grid;
      }
    }
  }
  .xs\:active\:hidden {
    @media (width >= 26.5625rem) {
      &:active {
        display: none;
      }
    }
  }
  .xs\:active\:inline-block {
    @media (width >= 26.5625rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .xs\:active\:inline-flex {
    @media (width >= 26.5625rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .xs\:active\:bg-black {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:active\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:active\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:active\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:active\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:active\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:active\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:active\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:active\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:active\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:active\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:active\:bg-white {
    @media (width >= 26.5625rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:active\:p-0 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:active\:p-1 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:active\:p-2 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:active\:p-3 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:active\:p-4 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:active\:p-5 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:active\:p-6 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:active\:p-8 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:active\:p-10 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:active\:p-12 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:active\:p-16 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:active\:p-20 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:active\:p-24 {
    @media (width >= 26.5625rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:active\:text-center {
    @media (width >= 26.5625rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .xs\:active\:text-left {
    @media (width >= 26.5625rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .xs\:active\:text-right {
    @media (width >= 26.5625rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .xs\:active\:text-black {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .xs\:active\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:active\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:active\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:active\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:active\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:active\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:active\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:active\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:active\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:active\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:active\:text-white {
    @media (width >= 26.5625rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .xs\:disabled\:m-0 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:disabled\:m-1 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:disabled\:m-2 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:disabled\:m-3 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:disabled\:m-4 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:disabled\:m-5 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:disabled\:m-6 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:disabled\:m-8 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:disabled\:m-10 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:disabled\:m-12 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:disabled\:m-16 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:disabled\:m-20 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:disabled\:m-24 {
    @media (width >= 26.5625rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:disabled\:block {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .xs\:disabled\:flex {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .xs\:disabled\:grid {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .xs\:disabled\:hidden {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .xs\:disabled\:inline-block {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .xs\:disabled\:inline-flex {
    @media (width >= 26.5625rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .xs\:disabled\:bg-black {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .xs\:disabled\:bg-gray-50 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xs\:disabled\:bg-gray-100 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xs\:disabled\:bg-gray-200 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xs\:disabled\:bg-gray-300 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xs\:disabled\:bg-gray-400 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xs\:disabled\:bg-gray-500 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xs\:disabled\:bg-gray-600 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xs\:disabled\:bg-gray-700 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xs\:disabled\:bg-gray-800 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xs\:disabled\:bg-gray-900 {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xs\:disabled\:bg-white {
    @media (width >= 26.5625rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .xs\:disabled\:p-0 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xs\:disabled\:p-1 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xs\:disabled\:p-2 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xs\:disabled\:p-3 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xs\:disabled\:p-4 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xs\:disabled\:p-5 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xs\:disabled\:p-6 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xs\:disabled\:p-8 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xs\:disabled\:p-10 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xs\:disabled\:p-12 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xs\:disabled\:p-16 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xs\:disabled\:p-20 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xs\:disabled\:p-24 {
    @media (width >= 26.5625rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xs\:disabled\:text-center {
    @media (width >= 26.5625rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .xs\:disabled\:text-left {
    @media (width >= 26.5625rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .xs\:disabled\:text-right {
    @media (width >= 26.5625rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .xs\:disabled\:text-black {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .xs\:disabled\:text-gray-50 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .xs\:disabled\:text-gray-100 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .xs\:disabled\:text-gray-200 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .xs\:disabled\:text-gray-300 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .xs\:disabled\:text-gray-400 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .xs\:disabled\:text-gray-500 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .xs\:disabled\:text-gray-600 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .xs\:disabled\:text-gray-700 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .xs\:disabled\:text-gray-800 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .xs\:disabled\:text-gray-900 {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .xs\:disabled\:text-white {
    @media (width >= 26.5625rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .sm\:group-hover\:m-0 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .sm\:group-hover\:m-1 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .sm\:group-hover\:m-2 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .sm\:group-hover\:m-3 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .sm\:group-hover\:m-4 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .sm\:group-hover\:m-5 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .sm\:group-hover\:m-6 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .sm\:group-hover\:m-8 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .sm\:group-hover\:m-10 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .sm\:group-hover\:m-12 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .sm\:group-hover\:m-16 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .sm\:group-hover\:m-20 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .sm\:group-hover\:m-24 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .sm\:group-hover\:block {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .sm\:group-hover\:flex {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .sm\:group-hover\:grid {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .sm\:group-hover\:hidden {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .sm\:group-hover\:inline-block {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .sm\:group-hover\:inline-flex {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .sm\:group-hover\:bg-black {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-50 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-100 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-200 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-300 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-400 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-500 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-600 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-700 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-800 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .sm\:group-hover\:bg-gray-900 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .sm\:group-hover\:bg-white {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .sm\:group-hover\:p-0 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .sm\:group-hover\:p-1 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .sm\:group-hover\:p-2 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .sm\:group-hover\:p-3 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .sm\:group-hover\:p-4 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .sm\:group-hover\:p-5 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .sm\:group-hover\:p-6 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .sm\:group-hover\:p-8 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .sm\:group-hover\:p-10 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .sm\:group-hover\:p-12 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .sm\:group-hover\:p-16 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .sm\:group-hover\:p-20 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .sm\:group-hover\:p-24 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .sm\:group-hover\:text-center {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .sm\:group-hover\:text-left {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .sm\:group-hover\:text-right {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .sm\:group-hover\:text-black {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-50 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-100 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-200 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-300 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-400 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-500 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-600 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-700 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-800 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .sm\:group-hover\:text-gray-900 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .sm\:group-hover\:text-white {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .sm\:peer-checked\:m-0 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:peer-checked\:m-1 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:peer-checked\:m-2 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:peer-checked\:m-3 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:peer-checked\:m-4 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:peer-checked\:m-5 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:peer-checked\:m-6 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:peer-checked\:m-8 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:peer-checked\:m-10 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:peer-checked\:m-12 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:peer-checked\:m-16 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:peer-checked\:m-20 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:peer-checked\:m-24 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:peer-checked\:block {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .sm\:peer-checked\:flex {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .sm\:peer-checked\:grid {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .sm\:peer-checked\:hidden {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .sm\:peer-checked\:inline-block {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .sm\:peer-checked\:inline-flex {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .sm\:peer-checked\:bg-black {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-50 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-100 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-200 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-300 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-400 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-500 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-600 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-700 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-800 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:peer-checked\:bg-gray-900 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:peer-checked\:bg-white {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:peer-checked\:p-0 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:peer-checked\:p-1 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:peer-checked\:p-2 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:peer-checked\:p-3 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:peer-checked\:p-4 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:peer-checked\:p-5 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:peer-checked\:p-6 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:peer-checked\:p-8 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:peer-checked\:p-10 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:peer-checked\:p-12 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:peer-checked\:p-16 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:peer-checked\:p-20 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:peer-checked\:p-24 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:peer-checked\:text-center {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .sm\:peer-checked\:text-left {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .sm\:peer-checked\:text-right {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .sm\:peer-checked\:text-black {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .sm\:peer-checked\:text-gray-50 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:peer-checked\:text-gray-100 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:peer-checked\:text-gray-200 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:peer-checked\:text-gray-300 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:peer-checked\:text-gray-400 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:peer-checked\:text-gray-500 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:peer-checked\:text-gray-600 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:peer-checked\:text-gray-700 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:peer-checked\:text-gray-800 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:peer-checked\:text-gray-900 {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:peer-checked\:text-white {
    @media (width >= 40rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .sm\:visited\:m-0 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:visited\:m-1 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:visited\:m-2 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:visited\:m-3 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:visited\:m-4 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:visited\:m-5 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:visited\:m-6 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:visited\:m-8 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:visited\:m-10 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:visited\:m-12 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:visited\:m-16 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:visited\:m-20 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:visited\:m-24 {
    @media (width >= 40rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:visited\:block {
    @media (width >= 40rem) {
      &:visited {
        display: block;
      }
    }
  }
  .sm\:visited\:flex {
    @media (width >= 40rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .sm\:visited\:grid {
    @media (width >= 40rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .sm\:visited\:hidden {
    @media (width >= 40rem) {
      &:visited {
        display: none;
      }
    }
  }
  .sm\:visited\:inline-block {
    @media (width >= 40rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .sm\:visited\:inline-flex {
    @media (width >= 40rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .sm\:visited\:bg-black {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:visited\:bg-gray-50 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:visited\:bg-gray-100 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:visited\:bg-gray-200 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:visited\:bg-gray-300 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:visited\:bg-gray-400 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:visited\:bg-gray-500 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:visited\:bg-gray-600 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:visited\:bg-gray-700 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:visited\:bg-gray-800 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:visited\:bg-gray-900 {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:visited\:bg-white {
    @media (width >= 40rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:visited\:p-0 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:visited\:p-1 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:visited\:p-2 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:visited\:p-3 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:visited\:p-4 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:visited\:p-5 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:visited\:p-6 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:visited\:p-8 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:visited\:p-10 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:visited\:p-12 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:visited\:p-16 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:visited\:p-20 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:visited\:p-24 {
    @media (width >= 40rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:visited\:text-center {
    @media (width >= 40rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .sm\:visited\:text-left {
    @media (width >= 40rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .sm\:visited\:text-right {
    @media (width >= 40rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .sm\:visited\:text-black {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .sm\:visited\:text-gray-50 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:visited\:text-gray-100 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:visited\:text-gray-200 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:visited\:text-gray-300 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:visited\:text-gray-400 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:visited\:text-gray-500 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:visited\:text-gray-600 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:visited\:text-gray-700 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:visited\:text-gray-800 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:visited\:text-gray-900 {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:visited\:text-white {
    @media (width >= 40rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .sm\:checked\:m-0 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:checked\:m-1 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:checked\:m-2 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:checked\:m-3 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:checked\:m-4 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:checked\:m-5 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:checked\:m-6 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:checked\:m-8 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:checked\:m-10 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:checked\:m-12 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:checked\:m-16 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:checked\:m-20 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:checked\:m-24 {
    @media (width >= 40rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:checked\:block {
    @media (width >= 40rem) {
      &:checked {
        display: block;
      }
    }
  }
  .sm\:checked\:flex {
    @media (width >= 40rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .sm\:checked\:grid {
    @media (width >= 40rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .sm\:checked\:hidden {
    @media (width >= 40rem) {
      &:checked {
        display: none;
      }
    }
  }
  .sm\:checked\:inline-block {
    @media (width >= 40rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .sm\:checked\:inline-flex {
    @media (width >= 40rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .sm\:checked\:bg-black {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:checked\:bg-gray-50 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:checked\:bg-gray-100 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:checked\:bg-gray-200 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:checked\:bg-gray-300 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:checked\:bg-gray-400 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:checked\:bg-gray-500 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:checked\:bg-gray-600 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:checked\:bg-gray-700 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:checked\:bg-gray-800 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:checked\:bg-gray-900 {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:checked\:bg-white {
    @media (width >= 40rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:checked\:p-0 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:checked\:p-1 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:checked\:p-2 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:checked\:p-3 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:checked\:p-4 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:checked\:p-5 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:checked\:p-6 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:checked\:p-8 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:checked\:p-10 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:checked\:p-12 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:checked\:p-16 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:checked\:p-20 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:checked\:p-24 {
    @media (width >= 40rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:checked\:text-center {
    @media (width >= 40rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .sm\:checked\:text-left {
    @media (width >= 40rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .sm\:checked\:text-right {
    @media (width >= 40rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .sm\:checked\:text-black {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .sm\:checked\:text-gray-50 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:checked\:text-gray-100 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:checked\:text-gray-200 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:checked\:text-gray-300 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:checked\:text-gray-400 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:checked\:text-gray-500 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:checked\:text-gray-600 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:checked\:text-gray-700 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:checked\:text-gray-800 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:checked\:text-gray-900 {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:checked\:text-white {
    @media (width >= 40rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .sm\:focus-within\:m-0 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus-within\:m-1 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus-within\:m-2 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus-within\:m-3 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus-within\:m-4 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus-within\:m-5 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus-within\:m-6 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus-within\:m-8 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus-within\:m-10 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus-within\:m-12 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus-within\:m-16 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus-within\:m-20 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus-within\:m-24 {
    @media (width >= 40rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus-within\:block {
    @media (width >= 40rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .sm\:focus-within\:flex {
    @media (width >= 40rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .sm\:focus-within\:grid {
    @media (width >= 40rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .sm\:focus-within\:hidden {
    @media (width >= 40rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .sm\:focus-within\:inline-block {
    @media (width >= 40rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .sm\:focus-within\:inline-flex {
    @media (width >= 40rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .sm\:focus-within\:bg-black {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:focus-within\:bg-gray-50 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus-within\:bg-gray-100 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus-within\:bg-gray-200 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus-within\:bg-gray-300 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus-within\:bg-gray-400 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus-within\:bg-gray-500 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus-within\:bg-gray-600 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus-within\:bg-gray-700 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus-within\:bg-gray-800 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus-within\:bg-gray-900 {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus-within\:bg-white {
    @media (width >= 40rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:focus-within\:p-0 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus-within\:p-1 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus-within\:p-2 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus-within\:p-3 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus-within\:p-4 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus-within\:p-5 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus-within\:p-6 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus-within\:p-8 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus-within\:p-10 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus-within\:p-12 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus-within\:p-16 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus-within\:p-20 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus-within\:p-24 {
    @media (width >= 40rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus-within\:text-center {
    @media (width >= 40rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .sm\:focus-within\:text-left {
    @media (width >= 40rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .sm\:focus-within\:text-right {
    @media (width >= 40rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .sm\:focus-within\:text-black {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .sm\:focus-within\:text-gray-50 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus-within\:text-gray-100 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus-within\:text-gray-200 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus-within\:text-gray-300 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus-within\:text-gray-400 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus-within\:text-gray-500 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus-within\:text-gray-600 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus-within\:text-gray-700 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus-within\:text-gray-800 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus-within\:text-gray-900 {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus-within\:text-white {
    @media (width >= 40rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .sm\:hover\:m-0 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .sm\:hover\:m-1 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .sm\:hover\:m-2 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .sm\:hover\:m-3 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .sm\:hover\:m-4 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .sm\:hover\:m-5 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .sm\:hover\:m-6 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .sm\:hover\:m-8 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .sm\:hover\:m-10 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .sm\:hover\:m-12 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .sm\:hover\:m-16 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .sm\:hover\:m-20 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .sm\:hover\:m-24 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .sm\:hover\:block {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .sm\:hover\:flex {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .sm\:hover\:grid {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .sm\:hover\:hidden {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .sm\:hover\:inline-block {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .sm\:hover\:inline-flex {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .sm\:hover\:bg-black {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-50 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-100 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-200 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-300 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-400 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-500 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-600 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-700 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-800 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .sm\:hover\:bg-gray-900 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .sm\:hover\:bg-white {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .sm\:hover\:p-0 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .sm\:hover\:p-1 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .sm\:hover\:p-2 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .sm\:hover\:p-3 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .sm\:hover\:p-4 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .sm\:hover\:p-5 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .sm\:hover\:p-6 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .sm\:hover\:p-8 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .sm\:hover\:p-10 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .sm\:hover\:p-12 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .sm\:hover\:p-16 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .sm\:hover\:p-20 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .sm\:hover\:p-24 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .sm\:hover\:text-center {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .sm\:hover\:text-left {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .sm\:hover\:text-right {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .sm\:hover\:text-black {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .sm\:hover\:text-gray-50 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .sm\:hover\:text-gray-100 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .sm\:hover\:text-gray-200 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .sm\:hover\:text-gray-300 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .sm\:hover\:text-gray-400 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .sm\:hover\:text-gray-500 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .sm\:hover\:text-gray-600 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .sm\:hover\:text-gray-700 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .sm\:hover\:text-gray-800 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .sm\:hover\:text-gray-900 {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .sm\:hover\:text-white {
    @media (width >= 40rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .sm\:focus\:m-0 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus\:m-1 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus\:m-2 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus\:m-3 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus\:m-4 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus\:m-5 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus\:m-6 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus\:m-8 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus\:m-10 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus\:m-12 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus\:m-16 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus\:m-20 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus\:m-24 {
    @media (width >= 40rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus\:block {
    @media (width >= 40rem) {
      &:focus {
        display: block;
      }
    }
  }
  .sm\:focus\:flex {
    @media (width >= 40rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .sm\:focus\:grid {
    @media (width >= 40rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .sm\:focus\:hidden {
    @media (width >= 40rem) {
      &:focus {
        display: none;
      }
    }
  }
  .sm\:focus\:inline-block {
    @media (width >= 40rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .sm\:focus\:inline-flex {
    @media (width >= 40rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .sm\:focus\:bg-black {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:focus\:bg-gray-50 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus\:bg-gray-100 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus\:bg-gray-200 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus\:bg-gray-300 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus\:bg-gray-400 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus\:bg-gray-500 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus\:bg-gray-600 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus\:bg-gray-700 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus\:bg-gray-800 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus\:bg-gray-900 {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus\:bg-white {
    @media (width >= 40rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:focus\:p-0 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus\:p-1 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus\:p-2 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus\:p-3 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus\:p-4 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus\:p-5 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus\:p-6 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus\:p-8 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus\:p-10 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus\:p-12 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus\:p-16 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus\:p-20 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus\:p-24 {
    @media (width >= 40rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus\:text-center {
    @media (width >= 40rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .sm\:focus\:text-left {
    @media (width >= 40rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .sm\:focus\:text-right {
    @media (width >= 40rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .sm\:focus\:text-black {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .sm\:focus\:text-gray-50 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus\:text-gray-100 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus\:text-gray-200 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus\:text-gray-300 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus\:text-gray-400 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus\:text-gray-500 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus\:text-gray-600 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus\:text-gray-700 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus\:text-gray-800 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus\:text-gray-900 {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus\:text-white {
    @media (width >= 40rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .sm\:focus-visible\:m-0 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus-visible\:m-1 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus-visible\:m-2 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus-visible\:m-3 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus-visible\:m-4 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus-visible\:m-5 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus-visible\:m-6 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus-visible\:m-8 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus-visible\:m-10 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus-visible\:m-12 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus-visible\:m-16 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus-visible\:m-20 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus-visible\:m-24 {
    @media (width >= 40rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus-visible\:block {
    @media (width >= 40rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .sm\:focus-visible\:flex {
    @media (width >= 40rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .sm\:focus-visible\:grid {
    @media (width >= 40rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .sm\:focus-visible\:hidden {
    @media (width >= 40rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .sm\:focus-visible\:inline-block {
    @media (width >= 40rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .sm\:focus-visible\:inline-flex {
    @media (width >= 40rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .sm\:focus-visible\:bg-black {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-50 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-100 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-200 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-300 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-400 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-500 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-600 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-700 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-800 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus-visible\:bg-gray-900 {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus-visible\:bg-white {
    @media (width >= 40rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:focus-visible\:p-0 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:focus-visible\:p-1 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:focus-visible\:p-2 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:focus-visible\:p-3 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:focus-visible\:p-4 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:focus-visible\:p-5 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:focus-visible\:p-6 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:focus-visible\:p-8 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:focus-visible\:p-10 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:focus-visible\:p-12 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:focus-visible\:p-16 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:focus-visible\:p-20 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:focus-visible\:p-24 {
    @media (width >= 40rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:focus-visible\:text-center {
    @media (width >= 40rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .sm\:focus-visible\:text-left {
    @media (width >= 40rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .sm\:focus-visible\:text-right {
    @media (width >= 40rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .sm\:focus-visible\:text-black {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .sm\:focus-visible\:text-gray-50 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:focus-visible\:text-gray-100 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:focus-visible\:text-gray-200 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:focus-visible\:text-gray-300 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:focus-visible\:text-gray-400 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:focus-visible\:text-gray-500 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:focus-visible\:text-gray-600 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:focus-visible\:text-gray-700 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:focus-visible\:text-gray-800 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:focus-visible\:text-gray-900 {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:focus-visible\:text-white {
    @media (width >= 40rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .sm\:active\:m-0 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:active\:m-1 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:active\:m-2 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:active\:m-3 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:active\:m-4 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:active\:m-5 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:active\:m-6 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:active\:m-8 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:active\:m-10 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:active\:m-12 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:active\:m-16 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:active\:m-20 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:active\:m-24 {
    @media (width >= 40rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:active\:block {
    @media (width >= 40rem) {
      &:active {
        display: block;
      }
    }
  }
  .sm\:active\:flex {
    @media (width >= 40rem) {
      &:active {
        display: flex;
      }
    }
  }
  .sm\:active\:grid {
    @media (width >= 40rem) {
      &:active {
        display: grid;
      }
    }
  }
  .sm\:active\:hidden {
    @media (width >= 40rem) {
      &:active {
        display: none;
      }
    }
  }
  .sm\:active\:inline-block {
    @media (width >= 40rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .sm\:active\:inline-flex {
    @media (width >= 40rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .sm\:active\:bg-black {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:active\:bg-gray-50 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:active\:bg-gray-100 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:active\:bg-gray-200 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:active\:bg-gray-300 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:active\:bg-gray-400 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:active\:bg-gray-500 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:active\:bg-gray-600 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:active\:bg-gray-700 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:active\:bg-gray-800 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:active\:bg-gray-900 {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:active\:bg-white {
    @media (width >= 40rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:active\:p-0 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:active\:p-1 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:active\:p-2 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:active\:p-3 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:active\:p-4 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:active\:p-5 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:active\:p-6 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:active\:p-8 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:active\:p-10 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:active\:p-12 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:active\:p-16 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:active\:p-20 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:active\:p-24 {
    @media (width >= 40rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:active\:text-center {
    @media (width >= 40rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .sm\:active\:text-left {
    @media (width >= 40rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .sm\:active\:text-right {
    @media (width >= 40rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .sm\:active\:text-black {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .sm\:active\:text-gray-50 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:active\:text-gray-100 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:active\:text-gray-200 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:active\:text-gray-300 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:active\:text-gray-400 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:active\:text-gray-500 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:active\:text-gray-600 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:active\:text-gray-700 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:active\:text-gray-800 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:active\:text-gray-900 {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:active\:text-white {
    @media (width >= 40rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .sm\:disabled\:m-0 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:disabled\:m-1 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:disabled\:m-2 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:disabled\:m-3 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:disabled\:m-4 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:disabled\:m-5 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:disabled\:m-6 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:disabled\:m-8 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:disabled\:m-10 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:disabled\:m-12 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:disabled\:m-16 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:disabled\:m-20 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:disabled\:m-24 {
    @media (width >= 40rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:disabled\:block {
    @media (width >= 40rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .sm\:disabled\:flex {
    @media (width >= 40rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .sm\:disabled\:grid {
    @media (width >= 40rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .sm\:disabled\:hidden {
    @media (width >= 40rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .sm\:disabled\:inline-block {
    @media (width >= 40rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .sm\:disabled\:inline-flex {
    @media (width >= 40rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .sm\:disabled\:bg-black {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .sm\:disabled\:bg-gray-50 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .sm\:disabled\:bg-gray-100 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .sm\:disabled\:bg-gray-200 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .sm\:disabled\:bg-gray-300 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .sm\:disabled\:bg-gray-400 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .sm\:disabled\:bg-gray-500 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .sm\:disabled\:bg-gray-600 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .sm\:disabled\:bg-gray-700 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .sm\:disabled\:bg-gray-800 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .sm\:disabled\:bg-gray-900 {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .sm\:disabled\:bg-white {
    @media (width >= 40rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .sm\:disabled\:p-0 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .sm\:disabled\:p-1 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .sm\:disabled\:p-2 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .sm\:disabled\:p-3 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .sm\:disabled\:p-4 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .sm\:disabled\:p-5 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .sm\:disabled\:p-6 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .sm\:disabled\:p-8 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .sm\:disabled\:p-10 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .sm\:disabled\:p-12 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .sm\:disabled\:p-16 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .sm\:disabled\:p-20 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .sm\:disabled\:p-24 {
    @media (width >= 40rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .sm\:disabled\:text-center {
    @media (width >= 40rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .sm\:disabled\:text-left {
    @media (width >= 40rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .sm\:disabled\:text-right {
    @media (width >= 40rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .sm\:disabled\:text-black {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .sm\:disabled\:text-gray-50 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .sm\:disabled\:text-gray-100 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .sm\:disabled\:text-gray-200 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .sm\:disabled\:text-gray-300 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .sm\:disabled\:text-gray-400 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .sm\:disabled\:text-gray-500 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .sm\:disabled\:text-gray-600 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .sm\:disabled\:text-gray-700 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .sm\:disabled\:text-gray-800 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .sm\:disabled\:text-gray-900 {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .sm\:disabled\:text-white {
    @media (width >= 40rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .md\:group-hover\:m-0 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .md\:group-hover\:m-1 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .md\:group-hover\:m-2 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .md\:group-hover\:m-3 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .md\:group-hover\:m-4 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .md\:group-hover\:m-5 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .md\:group-hover\:m-6 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .md\:group-hover\:m-8 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .md\:group-hover\:m-10 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .md\:group-hover\:m-12 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .md\:group-hover\:m-16 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .md\:group-hover\:m-20 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .md\:group-hover\:m-24 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .md\:group-hover\:block {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .md\:group-hover\:flex {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .md\:group-hover\:grid {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .md\:group-hover\:hidden {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .md\:group-hover\:inline-block {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .md\:group-hover\:inline-flex {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .md\:group-hover\:bg-black {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-50 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-100 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-200 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-300 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-400 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-500 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-600 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-700 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-800 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .md\:group-hover\:bg-gray-900 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .md\:group-hover\:bg-white {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .md\:group-hover\:p-0 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .md\:group-hover\:p-1 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .md\:group-hover\:p-2 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .md\:group-hover\:p-3 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .md\:group-hover\:p-4 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .md\:group-hover\:p-5 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .md\:group-hover\:p-6 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .md\:group-hover\:p-8 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .md\:group-hover\:p-10 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .md\:group-hover\:p-12 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .md\:group-hover\:p-16 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .md\:group-hover\:p-20 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .md\:group-hover\:p-24 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .md\:group-hover\:text-center {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .md\:group-hover\:text-left {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .md\:group-hover\:text-right {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .md\:group-hover\:text-black {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-50 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-100 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-200 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-300 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-400 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-500 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-600 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-700 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-800 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .md\:group-hover\:text-gray-900 {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .md\:group-hover\:text-white {
    @media (width >= 48rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .md\:peer-checked\:m-0 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:peer-checked\:m-1 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:peer-checked\:m-2 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:peer-checked\:m-3 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:peer-checked\:m-4 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:peer-checked\:m-5 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:peer-checked\:m-6 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:peer-checked\:m-8 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:peer-checked\:m-10 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:peer-checked\:m-12 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:peer-checked\:m-16 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:peer-checked\:m-20 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:peer-checked\:m-24 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:peer-checked\:block {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .md\:peer-checked\:flex {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .md\:peer-checked\:grid {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .md\:peer-checked\:hidden {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .md\:peer-checked\:inline-block {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .md\:peer-checked\:inline-flex {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .md\:peer-checked\:bg-black {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .md\:peer-checked\:bg-gray-50 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:peer-checked\:bg-gray-100 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:peer-checked\:bg-gray-200 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:peer-checked\:bg-gray-300 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:peer-checked\:bg-gray-400 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:peer-checked\:bg-gray-500 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:peer-checked\:bg-gray-600 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:peer-checked\:bg-gray-700 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:peer-checked\:bg-gray-800 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:peer-checked\:bg-gray-900 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:peer-checked\:bg-white {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .md\:peer-checked\:p-0 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:peer-checked\:p-1 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:peer-checked\:p-2 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:peer-checked\:p-3 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:peer-checked\:p-4 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:peer-checked\:p-5 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:peer-checked\:p-6 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:peer-checked\:p-8 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:peer-checked\:p-10 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:peer-checked\:p-12 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:peer-checked\:p-16 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:peer-checked\:p-20 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:peer-checked\:p-24 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:peer-checked\:text-center {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .md\:peer-checked\:text-left {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .md\:peer-checked\:text-right {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .md\:peer-checked\:text-black {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .md\:peer-checked\:text-gray-50 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:peer-checked\:text-gray-100 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:peer-checked\:text-gray-200 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:peer-checked\:text-gray-300 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:peer-checked\:text-gray-400 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:peer-checked\:text-gray-500 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:peer-checked\:text-gray-600 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:peer-checked\:text-gray-700 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:peer-checked\:text-gray-800 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:peer-checked\:text-gray-900 {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:peer-checked\:text-white {
    @media (width >= 48rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .md\:visited\:m-0 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:visited\:m-1 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:visited\:m-2 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:visited\:m-3 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:visited\:m-4 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:visited\:m-5 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:visited\:m-6 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:visited\:m-8 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:visited\:m-10 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:visited\:m-12 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:visited\:m-16 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:visited\:m-20 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:visited\:m-24 {
    @media (width >= 48rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:visited\:block {
    @media (width >= 48rem) {
      &:visited {
        display: block;
      }
    }
  }
  .md\:visited\:flex {
    @media (width >= 48rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .md\:visited\:grid {
    @media (width >= 48rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .md\:visited\:hidden {
    @media (width >= 48rem) {
      &:visited {
        display: none;
      }
    }
  }
  .md\:visited\:inline-block {
    @media (width >= 48rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .md\:visited\:inline-flex {
    @media (width >= 48rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .md\:visited\:bg-black {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .md\:visited\:bg-gray-50 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:visited\:bg-gray-100 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:visited\:bg-gray-200 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:visited\:bg-gray-300 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:visited\:bg-gray-400 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:visited\:bg-gray-500 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:visited\:bg-gray-600 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:visited\:bg-gray-700 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:visited\:bg-gray-800 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:visited\:bg-gray-900 {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:visited\:bg-white {
    @media (width >= 48rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .md\:visited\:p-0 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:visited\:p-1 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:visited\:p-2 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:visited\:p-3 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:visited\:p-4 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:visited\:p-5 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:visited\:p-6 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:visited\:p-8 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:visited\:p-10 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:visited\:p-12 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:visited\:p-16 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:visited\:p-20 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:visited\:p-24 {
    @media (width >= 48rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:visited\:text-center {
    @media (width >= 48rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .md\:visited\:text-left {
    @media (width >= 48rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .md\:visited\:text-right {
    @media (width >= 48rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .md\:visited\:text-black {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .md\:visited\:text-gray-50 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:visited\:text-gray-100 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:visited\:text-gray-200 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:visited\:text-gray-300 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:visited\:text-gray-400 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:visited\:text-gray-500 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:visited\:text-gray-600 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:visited\:text-gray-700 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:visited\:text-gray-800 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:visited\:text-gray-900 {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:visited\:text-white {
    @media (width >= 48rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .md\:checked\:m-0 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:checked\:m-1 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:checked\:m-2 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:checked\:m-3 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:checked\:m-4 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:checked\:m-5 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:checked\:m-6 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:checked\:m-8 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:checked\:m-10 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:checked\:m-12 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:checked\:m-16 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:checked\:m-20 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:checked\:m-24 {
    @media (width >= 48rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:checked\:block {
    @media (width >= 48rem) {
      &:checked {
        display: block;
      }
    }
  }
  .md\:checked\:flex {
    @media (width >= 48rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .md\:checked\:grid {
    @media (width >= 48rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .md\:checked\:hidden {
    @media (width >= 48rem) {
      &:checked {
        display: none;
      }
    }
  }
  .md\:checked\:inline-block {
    @media (width >= 48rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .md\:checked\:inline-flex {
    @media (width >= 48rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .md\:checked\:bg-black {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .md\:checked\:bg-gray-50 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:checked\:bg-gray-100 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:checked\:bg-gray-200 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:checked\:bg-gray-300 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:checked\:bg-gray-400 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:checked\:bg-gray-500 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:checked\:bg-gray-600 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:checked\:bg-gray-700 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:checked\:bg-gray-800 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:checked\:bg-gray-900 {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:checked\:bg-white {
    @media (width >= 48rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .md\:checked\:p-0 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:checked\:p-1 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:checked\:p-2 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:checked\:p-3 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:checked\:p-4 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:checked\:p-5 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:checked\:p-6 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:checked\:p-8 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:checked\:p-10 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:checked\:p-12 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:checked\:p-16 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:checked\:p-20 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:checked\:p-24 {
    @media (width >= 48rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:checked\:text-center {
    @media (width >= 48rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .md\:checked\:text-left {
    @media (width >= 48rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .md\:checked\:text-right {
    @media (width >= 48rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .md\:checked\:text-black {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .md\:checked\:text-gray-50 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:checked\:text-gray-100 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:checked\:text-gray-200 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:checked\:text-gray-300 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:checked\:text-gray-400 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:checked\:text-gray-500 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:checked\:text-gray-600 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:checked\:text-gray-700 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:checked\:text-gray-800 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:checked\:text-gray-900 {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:checked\:text-white {
    @media (width >= 48rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .md\:focus-within\:m-0 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus-within\:m-1 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus-within\:m-2 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus-within\:m-3 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus-within\:m-4 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus-within\:m-5 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus-within\:m-6 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus-within\:m-8 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus-within\:m-10 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus-within\:m-12 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus-within\:m-16 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus-within\:m-20 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus-within\:m-24 {
    @media (width >= 48rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus-within\:block {
    @media (width >= 48rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .md\:focus-within\:flex {
    @media (width >= 48rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .md\:focus-within\:grid {
    @media (width >= 48rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .md\:focus-within\:hidden {
    @media (width >= 48rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .md\:focus-within\:inline-block {
    @media (width >= 48rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .md\:focus-within\:inline-flex {
    @media (width >= 48rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .md\:focus-within\:bg-black {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .md\:focus-within\:bg-gray-50 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:focus-within\:bg-gray-100 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:focus-within\:bg-gray-200 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:focus-within\:bg-gray-300 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:focus-within\:bg-gray-400 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:focus-within\:bg-gray-500 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:focus-within\:bg-gray-600 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:focus-within\:bg-gray-700 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:focus-within\:bg-gray-800 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:focus-within\:bg-gray-900 {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:focus-within\:bg-white {
    @media (width >= 48rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .md\:focus-within\:p-0 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus-within\:p-1 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus-within\:p-2 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus-within\:p-3 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus-within\:p-4 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus-within\:p-5 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus-within\:p-6 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus-within\:p-8 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus-within\:p-10 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus-within\:p-12 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus-within\:p-16 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus-within\:p-20 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus-within\:p-24 {
    @media (width >= 48rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus-within\:text-center {
    @media (width >= 48rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .md\:focus-within\:text-left {
    @media (width >= 48rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .md\:focus-within\:text-right {
    @media (width >= 48rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .md\:focus-within\:text-black {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .md\:focus-within\:text-gray-50 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:focus-within\:text-gray-100 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:focus-within\:text-gray-200 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:focus-within\:text-gray-300 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:focus-within\:text-gray-400 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:focus-within\:text-gray-500 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:focus-within\:text-gray-600 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:focus-within\:text-gray-700 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:focus-within\:text-gray-800 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:focus-within\:text-gray-900 {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:focus-within\:text-white {
    @media (width >= 48rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .md\:hover\:m-0 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .md\:hover\:m-1 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .md\:hover\:m-2 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .md\:hover\:m-3 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .md\:hover\:m-4 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .md\:hover\:m-5 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .md\:hover\:m-6 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .md\:hover\:m-8 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .md\:hover\:m-10 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .md\:hover\:m-12 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .md\:hover\:m-16 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .md\:hover\:m-20 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .md\:hover\:m-24 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .md\:hover\:block {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .md\:hover\:flex {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .md\:hover\:grid {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .md\:hover\:hidden {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .md\:hover\:inline-block {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .md\:hover\:inline-flex {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .md\:hover\:bg-black {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .md\:hover\:bg-gray-50 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .md\:hover\:bg-gray-100 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .md\:hover\:bg-gray-200 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .md\:hover\:bg-gray-300 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .md\:hover\:bg-gray-400 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .md\:hover\:bg-gray-500 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .md\:hover\:bg-gray-600 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .md\:hover\:bg-gray-700 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .md\:hover\:bg-gray-800 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .md\:hover\:bg-gray-900 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .md\:hover\:bg-white {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .md\:hover\:p-0 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .md\:hover\:p-1 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .md\:hover\:p-2 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .md\:hover\:p-3 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .md\:hover\:p-4 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .md\:hover\:p-5 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .md\:hover\:p-6 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .md\:hover\:p-8 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .md\:hover\:p-10 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .md\:hover\:p-12 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .md\:hover\:p-16 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .md\:hover\:p-20 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .md\:hover\:p-24 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .md\:hover\:text-center {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .md\:hover\:text-left {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .md\:hover\:text-right {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .md\:hover\:text-black {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .md\:hover\:text-gray-50 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .md\:hover\:text-gray-100 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .md\:hover\:text-gray-200 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .md\:hover\:text-gray-300 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .md\:hover\:text-gray-400 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .md\:hover\:text-gray-500 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .md\:hover\:text-gray-600 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .md\:hover\:text-gray-700 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .md\:hover\:text-gray-800 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .md\:hover\:text-gray-900 {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .md\:hover\:text-white {
    @media (width >= 48rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .md\:focus\:m-0 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus\:m-1 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus\:m-2 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus\:m-3 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus\:m-4 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus\:m-5 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus\:m-6 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus\:m-8 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus\:m-10 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus\:m-12 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus\:m-16 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus\:m-20 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus\:m-24 {
    @media (width >= 48rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus\:block {
    @media (width >= 48rem) {
      &:focus {
        display: block;
      }
    }
  }
  .md\:focus\:flex {
    @media (width >= 48rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .md\:focus\:grid {
    @media (width >= 48rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .md\:focus\:hidden {
    @media (width >= 48rem) {
      &:focus {
        display: none;
      }
    }
  }
  .md\:focus\:inline-block {
    @media (width >= 48rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .md\:focus\:inline-flex {
    @media (width >= 48rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .md\:focus\:bg-black {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .md\:focus\:bg-gray-50 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:focus\:bg-gray-100 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:focus\:bg-gray-200 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:focus\:bg-gray-300 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:focus\:bg-gray-400 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:focus\:bg-gray-500 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:focus\:bg-gray-600 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:focus\:bg-gray-700 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:focus\:bg-gray-800 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:focus\:bg-gray-900 {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:focus\:bg-white {
    @media (width >= 48rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .md\:focus\:p-0 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus\:p-1 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus\:p-2 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus\:p-3 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus\:p-4 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus\:p-5 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus\:p-6 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus\:p-8 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus\:p-10 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus\:p-12 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus\:p-16 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus\:p-20 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus\:p-24 {
    @media (width >= 48rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus\:text-center {
    @media (width >= 48rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .md\:focus\:text-left {
    @media (width >= 48rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .md\:focus\:text-right {
    @media (width >= 48rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .md\:focus\:text-black {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .md\:focus\:text-gray-50 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:focus\:text-gray-100 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:focus\:text-gray-200 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:focus\:text-gray-300 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:focus\:text-gray-400 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:focus\:text-gray-500 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:focus\:text-gray-600 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:focus\:text-gray-700 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:focus\:text-gray-800 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:focus\:text-gray-900 {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:focus\:text-white {
    @media (width >= 48rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .md\:focus-visible\:m-0 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus-visible\:m-1 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus-visible\:m-2 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus-visible\:m-3 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus-visible\:m-4 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus-visible\:m-5 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus-visible\:m-6 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus-visible\:m-8 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus-visible\:m-10 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus-visible\:m-12 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus-visible\:m-16 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus-visible\:m-20 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus-visible\:m-24 {
    @media (width >= 48rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus-visible\:block {
    @media (width >= 48rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .md\:focus-visible\:flex {
    @media (width >= 48rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .md\:focus-visible\:grid {
    @media (width >= 48rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .md\:focus-visible\:hidden {
    @media (width >= 48rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .md\:focus-visible\:inline-block {
    @media (width >= 48rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .md\:focus-visible\:inline-flex {
    @media (width >= 48rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .md\:focus-visible\:bg-black {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .md\:focus-visible\:bg-gray-50 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:focus-visible\:bg-gray-100 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:focus-visible\:bg-gray-200 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:focus-visible\:bg-gray-300 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:focus-visible\:bg-gray-400 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:focus-visible\:bg-gray-500 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:focus-visible\:bg-gray-600 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:focus-visible\:bg-gray-700 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:focus-visible\:bg-gray-800 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:focus-visible\:bg-gray-900 {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:focus-visible\:bg-white {
    @media (width >= 48rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .md\:focus-visible\:p-0 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:focus-visible\:p-1 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:focus-visible\:p-2 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:focus-visible\:p-3 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:focus-visible\:p-4 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:focus-visible\:p-5 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:focus-visible\:p-6 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:focus-visible\:p-8 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:focus-visible\:p-10 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:focus-visible\:p-12 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:focus-visible\:p-16 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:focus-visible\:p-20 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:focus-visible\:p-24 {
    @media (width >= 48rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:focus-visible\:text-center {
    @media (width >= 48rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .md\:focus-visible\:text-left {
    @media (width >= 48rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .md\:focus-visible\:text-right {
    @media (width >= 48rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .md\:focus-visible\:text-black {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .md\:focus-visible\:text-gray-50 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:focus-visible\:text-gray-100 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:focus-visible\:text-gray-200 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:focus-visible\:text-gray-300 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:focus-visible\:text-gray-400 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:focus-visible\:text-gray-500 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:focus-visible\:text-gray-600 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:focus-visible\:text-gray-700 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:focus-visible\:text-gray-800 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:focus-visible\:text-gray-900 {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:focus-visible\:text-white {
    @media (width >= 48rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .md\:active\:m-0 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:active\:m-1 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:active\:m-2 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:active\:m-3 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:active\:m-4 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:active\:m-5 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:active\:m-6 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:active\:m-8 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:active\:m-10 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:active\:m-12 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:active\:m-16 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:active\:m-20 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:active\:m-24 {
    @media (width >= 48rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:active\:block {
    @media (width >= 48rem) {
      &:active {
        display: block;
      }
    }
  }
  .md\:active\:flex {
    @media (width >= 48rem) {
      &:active {
        display: flex;
      }
    }
  }
  .md\:active\:grid {
    @media (width >= 48rem) {
      &:active {
        display: grid;
      }
    }
  }
  .md\:active\:hidden {
    @media (width >= 48rem) {
      &:active {
        display: none;
      }
    }
  }
  .md\:active\:inline-block {
    @media (width >= 48rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .md\:active\:inline-flex {
    @media (width >= 48rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .md\:active\:bg-black {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .md\:active\:bg-gray-50 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:active\:bg-gray-100 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:active\:bg-gray-200 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:active\:bg-gray-300 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:active\:bg-gray-400 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:active\:bg-gray-500 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:active\:bg-gray-600 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:active\:bg-gray-700 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:active\:bg-gray-800 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:active\:bg-gray-900 {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:active\:bg-white {
    @media (width >= 48rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .md\:active\:p-0 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:active\:p-1 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:active\:p-2 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:active\:p-3 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:active\:p-4 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:active\:p-5 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:active\:p-6 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:active\:p-8 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:active\:p-10 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:active\:p-12 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:active\:p-16 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:active\:p-20 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:active\:p-24 {
    @media (width >= 48rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:active\:text-center {
    @media (width >= 48rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .md\:active\:text-left {
    @media (width >= 48rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .md\:active\:text-right {
    @media (width >= 48rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .md\:active\:text-black {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .md\:active\:text-gray-50 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:active\:text-gray-100 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:active\:text-gray-200 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:active\:text-gray-300 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:active\:text-gray-400 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:active\:text-gray-500 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:active\:text-gray-600 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:active\:text-gray-700 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:active\:text-gray-800 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:active\:text-gray-900 {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:active\:text-white {
    @media (width >= 48rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .md\:disabled\:m-0 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:disabled\:m-1 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:disabled\:m-2 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:disabled\:m-3 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:disabled\:m-4 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:disabled\:m-5 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:disabled\:m-6 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:disabled\:m-8 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:disabled\:m-10 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:disabled\:m-12 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:disabled\:m-16 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:disabled\:m-20 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:disabled\:m-24 {
    @media (width >= 48rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:disabled\:block {
    @media (width >= 48rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .md\:disabled\:flex {
    @media (width >= 48rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .md\:disabled\:grid {
    @media (width >= 48rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .md\:disabled\:hidden {
    @media (width >= 48rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .md\:disabled\:inline-block {
    @media (width >= 48rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .md\:disabled\:inline-flex {
    @media (width >= 48rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .md\:disabled\:bg-black {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .md\:disabled\:bg-gray-50 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .md\:disabled\:bg-gray-100 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .md\:disabled\:bg-gray-200 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .md\:disabled\:bg-gray-300 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .md\:disabled\:bg-gray-400 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .md\:disabled\:bg-gray-500 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .md\:disabled\:bg-gray-600 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .md\:disabled\:bg-gray-700 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .md\:disabled\:bg-gray-800 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .md\:disabled\:bg-gray-900 {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .md\:disabled\:bg-white {
    @media (width >= 48rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .md\:disabled\:p-0 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .md\:disabled\:p-1 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .md\:disabled\:p-2 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .md\:disabled\:p-3 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .md\:disabled\:p-4 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .md\:disabled\:p-5 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .md\:disabled\:p-6 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .md\:disabled\:p-8 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .md\:disabled\:p-10 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .md\:disabled\:p-12 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .md\:disabled\:p-16 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .md\:disabled\:p-20 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .md\:disabled\:p-24 {
    @media (width >= 48rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .md\:disabled\:text-center {
    @media (width >= 48rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .md\:disabled\:text-left {
    @media (width >= 48rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .md\:disabled\:text-right {
    @media (width >= 48rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .md\:disabled\:text-black {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .md\:disabled\:text-gray-50 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .md\:disabled\:text-gray-100 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .md\:disabled\:text-gray-200 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .md\:disabled\:text-gray-300 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .md\:disabled\:text-gray-400 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .md\:disabled\:text-gray-500 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .md\:disabled\:text-gray-600 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .md\:disabled\:text-gray-700 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .md\:disabled\:text-gray-800 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .md\:disabled\:text-gray-900 {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .md\:disabled\:text-white {
    @media (width >= 48rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .lg\:group-hover\:m-0 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .lg\:group-hover\:m-1 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .lg\:group-hover\:m-2 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .lg\:group-hover\:m-3 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .lg\:group-hover\:m-4 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .lg\:group-hover\:m-5 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .lg\:group-hover\:m-6 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .lg\:group-hover\:m-8 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .lg\:group-hover\:m-10 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .lg\:group-hover\:m-12 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .lg\:group-hover\:m-16 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .lg\:group-hover\:m-20 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .lg\:group-hover\:m-24 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .lg\:group-hover\:block {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .lg\:group-hover\:flex {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .lg\:group-hover\:grid {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .lg\:group-hover\:hidden {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .lg\:group-hover\:inline-block {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .lg\:group-hover\:inline-flex {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .lg\:group-hover\:bg-black {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-50 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-100 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-200 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-300 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-400 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-500 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-600 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-700 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-800 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .lg\:group-hover\:bg-gray-900 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .lg\:group-hover\:bg-white {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .lg\:group-hover\:p-0 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .lg\:group-hover\:p-1 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .lg\:group-hover\:p-2 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .lg\:group-hover\:p-3 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .lg\:group-hover\:p-4 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .lg\:group-hover\:p-5 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .lg\:group-hover\:p-6 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .lg\:group-hover\:p-8 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .lg\:group-hover\:p-10 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .lg\:group-hover\:p-12 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .lg\:group-hover\:p-16 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .lg\:group-hover\:p-20 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .lg\:group-hover\:p-24 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .lg\:group-hover\:text-center {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .lg\:group-hover\:text-left {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .lg\:group-hover\:text-right {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .lg\:group-hover\:text-black {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-50 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-100 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-200 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-300 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-400 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-500 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-600 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-700 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-800 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .lg\:group-hover\:text-gray-900 {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .lg\:group-hover\:text-white {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .lg\:peer-checked\:m-0 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:peer-checked\:m-1 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:peer-checked\:m-2 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:peer-checked\:m-3 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:peer-checked\:m-4 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:peer-checked\:m-5 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:peer-checked\:m-6 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:peer-checked\:m-8 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:peer-checked\:m-10 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:peer-checked\:m-12 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:peer-checked\:m-16 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:peer-checked\:m-20 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:peer-checked\:m-24 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:peer-checked\:block {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .lg\:peer-checked\:flex {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .lg\:peer-checked\:grid {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .lg\:peer-checked\:hidden {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .lg\:peer-checked\:inline-block {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .lg\:peer-checked\:inline-flex {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .lg\:peer-checked\:bg-black {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-50 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-100 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-200 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-300 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-400 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-500 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-600 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-700 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-800 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:peer-checked\:bg-gray-900 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:peer-checked\:bg-white {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:peer-checked\:p-0 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:peer-checked\:p-1 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:peer-checked\:p-2 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:peer-checked\:p-3 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:peer-checked\:p-4 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:peer-checked\:p-5 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:peer-checked\:p-6 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:peer-checked\:p-8 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:peer-checked\:p-10 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:peer-checked\:p-12 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:peer-checked\:p-16 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:peer-checked\:p-20 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:peer-checked\:p-24 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:peer-checked\:text-center {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .lg\:peer-checked\:text-left {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .lg\:peer-checked\:text-right {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .lg\:peer-checked\:text-black {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .lg\:peer-checked\:text-gray-50 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:peer-checked\:text-gray-100 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:peer-checked\:text-gray-200 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:peer-checked\:text-gray-300 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:peer-checked\:text-gray-400 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:peer-checked\:text-gray-500 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:peer-checked\:text-gray-600 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:peer-checked\:text-gray-700 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:peer-checked\:text-gray-800 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:peer-checked\:text-gray-900 {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:peer-checked\:text-white {
    @media (width >= 64rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .lg\:visited\:m-0 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:visited\:m-1 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:visited\:m-2 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:visited\:m-3 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:visited\:m-4 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:visited\:m-5 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:visited\:m-6 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:visited\:m-8 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:visited\:m-10 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:visited\:m-12 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:visited\:m-16 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:visited\:m-20 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:visited\:m-24 {
    @media (width >= 64rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:visited\:block {
    @media (width >= 64rem) {
      &:visited {
        display: block;
      }
    }
  }
  .lg\:visited\:flex {
    @media (width >= 64rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .lg\:visited\:grid {
    @media (width >= 64rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .lg\:visited\:hidden {
    @media (width >= 64rem) {
      &:visited {
        display: none;
      }
    }
  }
  .lg\:visited\:inline-block {
    @media (width >= 64rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .lg\:visited\:inline-flex {
    @media (width >= 64rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .lg\:visited\:bg-black {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:visited\:bg-gray-50 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:visited\:bg-gray-100 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:visited\:bg-gray-200 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:visited\:bg-gray-300 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:visited\:bg-gray-400 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:visited\:bg-gray-500 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:visited\:bg-gray-600 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:visited\:bg-gray-700 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:visited\:bg-gray-800 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:visited\:bg-gray-900 {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:visited\:bg-white {
    @media (width >= 64rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:visited\:p-0 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:visited\:p-1 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:visited\:p-2 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:visited\:p-3 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:visited\:p-4 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:visited\:p-5 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:visited\:p-6 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:visited\:p-8 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:visited\:p-10 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:visited\:p-12 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:visited\:p-16 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:visited\:p-20 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:visited\:p-24 {
    @media (width >= 64rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:visited\:text-center {
    @media (width >= 64rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .lg\:visited\:text-left {
    @media (width >= 64rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .lg\:visited\:text-right {
    @media (width >= 64rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .lg\:visited\:text-black {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .lg\:visited\:text-gray-50 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:visited\:text-gray-100 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:visited\:text-gray-200 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:visited\:text-gray-300 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:visited\:text-gray-400 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:visited\:text-gray-500 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:visited\:text-gray-600 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:visited\:text-gray-700 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:visited\:text-gray-800 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:visited\:text-gray-900 {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:visited\:text-white {
    @media (width >= 64rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .lg\:checked\:m-0 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:checked\:m-1 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:checked\:m-2 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:checked\:m-3 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:checked\:m-4 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:checked\:m-5 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:checked\:m-6 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:checked\:m-8 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:checked\:m-10 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:checked\:m-12 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:checked\:m-16 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:checked\:m-20 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:checked\:m-24 {
    @media (width >= 64rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:checked\:block {
    @media (width >= 64rem) {
      &:checked {
        display: block;
      }
    }
  }
  .lg\:checked\:flex {
    @media (width >= 64rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .lg\:checked\:grid {
    @media (width >= 64rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .lg\:checked\:hidden {
    @media (width >= 64rem) {
      &:checked {
        display: none;
      }
    }
  }
  .lg\:checked\:inline-block {
    @media (width >= 64rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .lg\:checked\:inline-flex {
    @media (width >= 64rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .lg\:checked\:bg-black {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:checked\:bg-gray-50 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:checked\:bg-gray-100 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:checked\:bg-gray-200 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:checked\:bg-gray-300 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:checked\:bg-gray-400 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:checked\:bg-gray-500 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:checked\:bg-gray-600 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:checked\:bg-gray-700 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:checked\:bg-gray-800 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:checked\:bg-gray-900 {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:checked\:bg-white {
    @media (width >= 64rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:checked\:p-0 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:checked\:p-1 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:checked\:p-2 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:checked\:p-3 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:checked\:p-4 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:checked\:p-5 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:checked\:p-6 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:checked\:p-8 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:checked\:p-10 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:checked\:p-12 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:checked\:p-16 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:checked\:p-20 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:checked\:p-24 {
    @media (width >= 64rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:checked\:text-center {
    @media (width >= 64rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .lg\:checked\:text-left {
    @media (width >= 64rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .lg\:checked\:text-right {
    @media (width >= 64rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .lg\:checked\:text-black {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .lg\:checked\:text-gray-50 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:checked\:text-gray-100 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:checked\:text-gray-200 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:checked\:text-gray-300 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:checked\:text-gray-400 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:checked\:text-gray-500 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:checked\:text-gray-600 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:checked\:text-gray-700 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:checked\:text-gray-800 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:checked\:text-gray-900 {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:checked\:text-white {
    @media (width >= 64rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .lg\:focus-within\:m-0 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus-within\:m-1 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus-within\:m-2 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus-within\:m-3 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus-within\:m-4 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus-within\:m-5 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus-within\:m-6 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus-within\:m-8 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus-within\:m-10 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus-within\:m-12 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus-within\:m-16 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus-within\:m-20 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus-within\:m-24 {
    @media (width >= 64rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus-within\:block {
    @media (width >= 64rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .lg\:focus-within\:flex {
    @media (width >= 64rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .lg\:focus-within\:grid {
    @media (width >= 64rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .lg\:focus-within\:hidden {
    @media (width >= 64rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .lg\:focus-within\:inline-block {
    @media (width >= 64rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .lg\:focus-within\:inline-flex {
    @media (width >= 64rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .lg\:focus-within\:bg-black {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:focus-within\:bg-gray-50 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus-within\:bg-gray-100 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus-within\:bg-gray-200 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus-within\:bg-gray-300 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus-within\:bg-gray-400 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus-within\:bg-gray-500 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus-within\:bg-gray-600 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus-within\:bg-gray-700 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus-within\:bg-gray-800 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus-within\:bg-gray-900 {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus-within\:bg-white {
    @media (width >= 64rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:focus-within\:p-0 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus-within\:p-1 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus-within\:p-2 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus-within\:p-3 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus-within\:p-4 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus-within\:p-5 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus-within\:p-6 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus-within\:p-8 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus-within\:p-10 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus-within\:p-12 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus-within\:p-16 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus-within\:p-20 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus-within\:p-24 {
    @media (width >= 64rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus-within\:text-center {
    @media (width >= 64rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .lg\:focus-within\:text-left {
    @media (width >= 64rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .lg\:focus-within\:text-right {
    @media (width >= 64rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .lg\:focus-within\:text-black {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .lg\:focus-within\:text-gray-50 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus-within\:text-gray-100 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus-within\:text-gray-200 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus-within\:text-gray-300 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus-within\:text-gray-400 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus-within\:text-gray-500 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus-within\:text-gray-600 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus-within\:text-gray-700 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus-within\:text-gray-800 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus-within\:text-gray-900 {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus-within\:text-white {
    @media (width >= 64rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .lg\:hover\:m-0 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .lg\:hover\:m-1 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .lg\:hover\:m-2 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .lg\:hover\:m-3 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .lg\:hover\:m-4 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .lg\:hover\:m-5 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .lg\:hover\:m-6 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .lg\:hover\:m-8 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .lg\:hover\:m-10 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .lg\:hover\:m-12 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .lg\:hover\:m-16 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .lg\:hover\:m-20 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .lg\:hover\:m-24 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .lg\:hover\:block {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .lg\:hover\:flex {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .lg\:hover\:grid {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .lg\:hover\:hidden {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .lg\:hover\:inline-block {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .lg\:hover\:inline-flex {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .lg\:hover\:bg-black {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-50 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-100 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-200 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-300 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-400 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-500 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-600 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-700 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-800 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .lg\:hover\:bg-gray-900 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .lg\:hover\:bg-white {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .lg\:hover\:p-0 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .lg\:hover\:p-1 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .lg\:hover\:p-2 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .lg\:hover\:p-3 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .lg\:hover\:p-4 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .lg\:hover\:p-5 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .lg\:hover\:p-6 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .lg\:hover\:p-8 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .lg\:hover\:p-10 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .lg\:hover\:p-12 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .lg\:hover\:p-16 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .lg\:hover\:p-20 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .lg\:hover\:p-24 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .lg\:hover\:text-center {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .lg\:hover\:text-left {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .lg\:hover\:text-right {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .lg\:hover\:text-black {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .lg\:hover\:text-gray-50 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .lg\:hover\:text-gray-100 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .lg\:hover\:text-gray-200 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .lg\:hover\:text-gray-300 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .lg\:hover\:text-gray-400 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .lg\:hover\:text-gray-500 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .lg\:hover\:text-gray-600 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .lg\:hover\:text-gray-700 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .lg\:hover\:text-gray-800 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .lg\:hover\:text-gray-900 {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .lg\:hover\:text-white {
    @media (width >= 64rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .lg\:focus\:m-0 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus\:m-1 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus\:m-2 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus\:m-3 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus\:m-4 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus\:m-5 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus\:m-6 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus\:m-8 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus\:m-10 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus\:m-12 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus\:m-16 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus\:m-20 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus\:m-24 {
    @media (width >= 64rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus\:block {
    @media (width >= 64rem) {
      &:focus {
        display: block;
      }
    }
  }
  .lg\:focus\:flex {
    @media (width >= 64rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .lg\:focus\:grid {
    @media (width >= 64rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .lg\:focus\:hidden {
    @media (width >= 64rem) {
      &:focus {
        display: none;
      }
    }
  }
  .lg\:focus\:inline-block {
    @media (width >= 64rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .lg\:focus\:inline-flex {
    @media (width >= 64rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .lg\:focus\:bg-black {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:focus\:bg-gray-50 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus\:bg-gray-100 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus\:bg-gray-200 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus\:bg-gray-300 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus\:bg-gray-400 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus\:bg-gray-500 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus\:bg-gray-600 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus\:bg-gray-700 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus\:bg-gray-800 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus\:bg-gray-900 {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus\:bg-white {
    @media (width >= 64rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:focus\:p-0 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus\:p-1 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus\:p-2 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus\:p-3 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus\:p-4 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus\:p-5 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus\:p-6 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus\:p-8 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus\:p-10 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus\:p-12 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus\:p-16 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus\:p-20 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus\:p-24 {
    @media (width >= 64rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus\:text-center {
    @media (width >= 64rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .lg\:focus\:text-left {
    @media (width >= 64rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .lg\:focus\:text-right {
    @media (width >= 64rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .lg\:focus\:text-black {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .lg\:focus\:text-gray-50 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus\:text-gray-100 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus\:text-gray-200 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus\:text-gray-300 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus\:text-gray-400 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus\:text-gray-500 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus\:text-gray-600 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus\:text-gray-700 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus\:text-gray-800 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus\:text-gray-900 {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus\:text-white {
    @media (width >= 64rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .lg\:focus-visible\:m-0 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus-visible\:m-1 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus-visible\:m-2 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus-visible\:m-3 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus-visible\:m-4 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus-visible\:m-5 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus-visible\:m-6 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus-visible\:m-8 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus-visible\:m-10 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus-visible\:m-12 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus-visible\:m-16 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus-visible\:m-20 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus-visible\:m-24 {
    @media (width >= 64rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus-visible\:block {
    @media (width >= 64rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .lg\:focus-visible\:flex {
    @media (width >= 64rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .lg\:focus-visible\:grid {
    @media (width >= 64rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .lg\:focus-visible\:hidden {
    @media (width >= 64rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .lg\:focus-visible\:inline-block {
    @media (width >= 64rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .lg\:focus-visible\:inline-flex {
    @media (width >= 64rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .lg\:focus-visible\:bg-black {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-50 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-100 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-200 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-300 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-400 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-500 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-600 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-700 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-800 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus-visible\:bg-gray-900 {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus-visible\:bg-white {
    @media (width >= 64rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:focus-visible\:p-0 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:focus-visible\:p-1 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:focus-visible\:p-2 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:focus-visible\:p-3 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:focus-visible\:p-4 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:focus-visible\:p-5 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:focus-visible\:p-6 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:focus-visible\:p-8 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:focus-visible\:p-10 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:focus-visible\:p-12 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:focus-visible\:p-16 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:focus-visible\:p-20 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:focus-visible\:p-24 {
    @media (width >= 64rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:focus-visible\:text-center {
    @media (width >= 64rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .lg\:focus-visible\:text-left {
    @media (width >= 64rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .lg\:focus-visible\:text-right {
    @media (width >= 64rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .lg\:focus-visible\:text-black {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .lg\:focus-visible\:text-gray-50 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:focus-visible\:text-gray-100 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:focus-visible\:text-gray-200 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:focus-visible\:text-gray-300 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:focus-visible\:text-gray-400 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:focus-visible\:text-gray-500 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:focus-visible\:text-gray-600 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:focus-visible\:text-gray-700 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:focus-visible\:text-gray-800 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:focus-visible\:text-gray-900 {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:focus-visible\:text-white {
    @media (width >= 64rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .lg\:active\:m-0 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:active\:m-1 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:active\:m-2 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:active\:m-3 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:active\:m-4 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:active\:m-5 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:active\:m-6 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:active\:m-8 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:active\:m-10 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:active\:m-12 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:active\:m-16 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:active\:m-20 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:active\:m-24 {
    @media (width >= 64rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:active\:block {
    @media (width >= 64rem) {
      &:active {
        display: block;
      }
    }
  }
  .lg\:active\:flex {
    @media (width >= 64rem) {
      &:active {
        display: flex;
      }
    }
  }
  .lg\:active\:grid {
    @media (width >= 64rem) {
      &:active {
        display: grid;
      }
    }
  }
  .lg\:active\:hidden {
    @media (width >= 64rem) {
      &:active {
        display: none;
      }
    }
  }
  .lg\:active\:inline-block {
    @media (width >= 64rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .lg\:active\:inline-flex {
    @media (width >= 64rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .lg\:active\:bg-black {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:active\:bg-gray-50 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:active\:bg-gray-100 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:active\:bg-gray-200 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:active\:bg-gray-300 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:active\:bg-gray-400 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:active\:bg-gray-500 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:active\:bg-gray-600 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:active\:bg-gray-700 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:active\:bg-gray-800 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:active\:bg-gray-900 {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:active\:bg-white {
    @media (width >= 64rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:active\:p-0 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:active\:p-1 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:active\:p-2 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:active\:p-3 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:active\:p-4 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:active\:p-5 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:active\:p-6 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:active\:p-8 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:active\:p-10 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:active\:p-12 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:active\:p-16 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:active\:p-20 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:active\:p-24 {
    @media (width >= 64rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:active\:text-center {
    @media (width >= 64rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .lg\:active\:text-left {
    @media (width >= 64rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .lg\:active\:text-right {
    @media (width >= 64rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .lg\:active\:text-black {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .lg\:active\:text-gray-50 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:active\:text-gray-100 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:active\:text-gray-200 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:active\:text-gray-300 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:active\:text-gray-400 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:active\:text-gray-500 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:active\:text-gray-600 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:active\:text-gray-700 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:active\:text-gray-800 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:active\:text-gray-900 {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:active\:text-white {
    @media (width >= 64rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .lg\:disabled\:m-0 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:disabled\:m-1 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:disabled\:m-2 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:disabled\:m-3 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:disabled\:m-4 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:disabled\:m-5 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:disabled\:m-6 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:disabled\:m-8 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:disabled\:m-10 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:disabled\:m-12 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:disabled\:m-16 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:disabled\:m-20 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:disabled\:m-24 {
    @media (width >= 64rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:disabled\:block {
    @media (width >= 64rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .lg\:disabled\:flex {
    @media (width >= 64rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .lg\:disabled\:grid {
    @media (width >= 64rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .lg\:disabled\:hidden {
    @media (width >= 64rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .lg\:disabled\:inline-block {
    @media (width >= 64rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .lg\:disabled\:inline-flex {
    @media (width >= 64rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .lg\:disabled\:bg-black {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .lg\:disabled\:bg-gray-50 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .lg\:disabled\:bg-gray-100 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .lg\:disabled\:bg-gray-200 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .lg\:disabled\:bg-gray-300 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .lg\:disabled\:bg-gray-400 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .lg\:disabled\:bg-gray-500 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .lg\:disabled\:bg-gray-600 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .lg\:disabled\:bg-gray-700 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .lg\:disabled\:bg-gray-800 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .lg\:disabled\:bg-gray-900 {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .lg\:disabled\:bg-white {
    @media (width >= 64rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .lg\:disabled\:p-0 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .lg\:disabled\:p-1 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .lg\:disabled\:p-2 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .lg\:disabled\:p-3 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:disabled\:p-4 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .lg\:disabled\:p-5 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .lg\:disabled\:p-6 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .lg\:disabled\:p-8 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .lg\:disabled\:p-10 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .lg\:disabled\:p-12 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .lg\:disabled\:p-16 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .lg\:disabled\:p-20 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .lg\:disabled\:p-24 {
    @media (width >= 64rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .lg\:disabled\:text-center {
    @media (width >= 64rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .lg\:disabled\:text-left {
    @media (width >= 64rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .lg\:disabled\:text-right {
    @media (width >= 64rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .lg\:disabled\:text-black {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .lg\:disabled\:text-gray-50 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .lg\:disabled\:text-gray-100 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .lg\:disabled\:text-gray-200 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .lg\:disabled\:text-gray-300 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .lg\:disabled\:text-gray-400 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .lg\:disabled\:text-gray-500 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .lg\:disabled\:text-gray-600 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .lg\:disabled\:text-gray-700 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .lg\:disabled\:text-gray-800 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .lg\:disabled\:text-gray-900 {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .lg\:disabled\:text-white {
    @media (width >= 64rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .xl\:group-hover\:m-0 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xl\:group-hover\:m-1 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xl\:group-hover\:m-2 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xl\:group-hover\:m-3 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xl\:group-hover\:m-4 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xl\:group-hover\:m-5 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xl\:group-hover\:m-6 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xl\:group-hover\:m-8 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xl\:group-hover\:m-10 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xl\:group-hover\:m-12 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xl\:group-hover\:m-16 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xl\:group-hover\:m-20 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xl\:group-hover\:m-24 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xl\:group-hover\:block {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xl\:group-hover\:flex {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xl\:group-hover\:grid {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xl\:group-hover\:hidden {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xl\:group-hover\:inline-block {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xl\:group-hover\:inline-flex {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xl\:group-hover\:bg-black {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-50 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-100 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-200 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-300 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-400 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-500 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-600 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-700 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-800 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xl\:group-hover\:bg-gray-900 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xl\:group-hover\:bg-white {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xl\:group-hover\:p-0 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xl\:group-hover\:p-1 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xl\:group-hover\:p-2 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xl\:group-hover\:p-3 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xl\:group-hover\:p-4 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xl\:group-hover\:p-5 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xl\:group-hover\:p-6 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xl\:group-hover\:p-8 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xl\:group-hover\:p-10 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xl\:group-hover\:p-12 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xl\:group-hover\:p-16 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xl\:group-hover\:p-20 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xl\:group-hover\:p-24 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xl\:group-hover\:text-center {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xl\:group-hover\:text-left {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xl\:group-hover\:text-right {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xl\:group-hover\:text-black {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-50 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-100 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-200 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-300 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-400 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-500 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-600 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-700 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-800 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xl\:group-hover\:text-gray-900 {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xl\:group-hover\:text-white {
    @media (width >= 80rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xl\:peer-checked\:m-0 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:peer-checked\:m-1 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:peer-checked\:m-2 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:peer-checked\:m-3 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:peer-checked\:m-4 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:peer-checked\:m-5 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:peer-checked\:m-6 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:peer-checked\:m-8 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:peer-checked\:m-10 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:peer-checked\:m-12 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:peer-checked\:m-16 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:peer-checked\:m-20 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:peer-checked\:m-24 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:peer-checked\:block {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .xl\:peer-checked\:flex {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .xl\:peer-checked\:grid {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .xl\:peer-checked\:hidden {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .xl\:peer-checked\:inline-block {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .xl\:peer-checked\:inline-flex {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .xl\:peer-checked\:bg-black {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-50 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-100 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-200 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-300 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-400 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-500 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-600 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-700 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-800 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:peer-checked\:bg-gray-900 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:peer-checked\:bg-white {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:peer-checked\:p-0 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:peer-checked\:p-1 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:peer-checked\:p-2 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:peer-checked\:p-3 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:peer-checked\:p-4 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:peer-checked\:p-5 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:peer-checked\:p-6 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:peer-checked\:p-8 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:peer-checked\:p-10 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:peer-checked\:p-12 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:peer-checked\:p-16 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:peer-checked\:p-20 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:peer-checked\:p-24 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:peer-checked\:text-center {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .xl\:peer-checked\:text-left {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .xl\:peer-checked\:text-right {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .xl\:peer-checked\:text-black {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .xl\:peer-checked\:text-gray-50 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:peer-checked\:text-gray-100 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:peer-checked\:text-gray-200 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:peer-checked\:text-gray-300 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:peer-checked\:text-gray-400 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:peer-checked\:text-gray-500 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:peer-checked\:text-gray-600 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:peer-checked\:text-gray-700 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:peer-checked\:text-gray-800 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:peer-checked\:text-gray-900 {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:peer-checked\:text-white {
    @media (width >= 80rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .xl\:visited\:m-0 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:visited\:m-1 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:visited\:m-2 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:visited\:m-3 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:visited\:m-4 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:visited\:m-5 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:visited\:m-6 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:visited\:m-8 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:visited\:m-10 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:visited\:m-12 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:visited\:m-16 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:visited\:m-20 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:visited\:m-24 {
    @media (width >= 80rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:visited\:block {
    @media (width >= 80rem) {
      &:visited {
        display: block;
      }
    }
  }
  .xl\:visited\:flex {
    @media (width >= 80rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .xl\:visited\:grid {
    @media (width >= 80rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .xl\:visited\:hidden {
    @media (width >= 80rem) {
      &:visited {
        display: none;
      }
    }
  }
  .xl\:visited\:inline-block {
    @media (width >= 80rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .xl\:visited\:inline-flex {
    @media (width >= 80rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .xl\:visited\:bg-black {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:visited\:bg-gray-50 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:visited\:bg-gray-100 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:visited\:bg-gray-200 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:visited\:bg-gray-300 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:visited\:bg-gray-400 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:visited\:bg-gray-500 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:visited\:bg-gray-600 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:visited\:bg-gray-700 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:visited\:bg-gray-800 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:visited\:bg-gray-900 {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:visited\:bg-white {
    @media (width >= 80rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:visited\:p-0 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:visited\:p-1 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:visited\:p-2 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:visited\:p-3 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:visited\:p-4 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:visited\:p-5 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:visited\:p-6 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:visited\:p-8 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:visited\:p-10 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:visited\:p-12 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:visited\:p-16 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:visited\:p-20 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:visited\:p-24 {
    @media (width >= 80rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:visited\:text-center {
    @media (width >= 80rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .xl\:visited\:text-left {
    @media (width >= 80rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .xl\:visited\:text-right {
    @media (width >= 80rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .xl\:visited\:text-black {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .xl\:visited\:text-gray-50 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:visited\:text-gray-100 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:visited\:text-gray-200 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:visited\:text-gray-300 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:visited\:text-gray-400 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:visited\:text-gray-500 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:visited\:text-gray-600 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:visited\:text-gray-700 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:visited\:text-gray-800 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:visited\:text-gray-900 {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:visited\:text-white {
    @media (width >= 80rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .xl\:checked\:m-0 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:checked\:m-1 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:checked\:m-2 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:checked\:m-3 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:checked\:m-4 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:checked\:m-5 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:checked\:m-6 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:checked\:m-8 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:checked\:m-10 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:checked\:m-12 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:checked\:m-16 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:checked\:m-20 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:checked\:m-24 {
    @media (width >= 80rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:checked\:block {
    @media (width >= 80rem) {
      &:checked {
        display: block;
      }
    }
  }
  .xl\:checked\:flex {
    @media (width >= 80rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .xl\:checked\:grid {
    @media (width >= 80rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .xl\:checked\:hidden {
    @media (width >= 80rem) {
      &:checked {
        display: none;
      }
    }
  }
  .xl\:checked\:inline-block {
    @media (width >= 80rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .xl\:checked\:inline-flex {
    @media (width >= 80rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .xl\:checked\:bg-black {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:checked\:bg-gray-50 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:checked\:bg-gray-100 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:checked\:bg-gray-200 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:checked\:bg-gray-300 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:checked\:bg-gray-400 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:checked\:bg-gray-500 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:checked\:bg-gray-600 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:checked\:bg-gray-700 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:checked\:bg-gray-800 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:checked\:bg-gray-900 {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:checked\:bg-white {
    @media (width >= 80rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:checked\:p-0 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:checked\:p-1 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:checked\:p-2 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:checked\:p-3 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:checked\:p-4 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:checked\:p-5 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:checked\:p-6 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:checked\:p-8 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:checked\:p-10 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:checked\:p-12 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:checked\:p-16 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:checked\:p-20 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:checked\:p-24 {
    @media (width >= 80rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:checked\:text-center {
    @media (width >= 80rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .xl\:checked\:text-left {
    @media (width >= 80rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .xl\:checked\:text-right {
    @media (width >= 80rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .xl\:checked\:text-black {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .xl\:checked\:text-gray-50 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:checked\:text-gray-100 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:checked\:text-gray-200 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:checked\:text-gray-300 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:checked\:text-gray-400 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:checked\:text-gray-500 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:checked\:text-gray-600 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:checked\:text-gray-700 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:checked\:text-gray-800 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:checked\:text-gray-900 {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:checked\:text-white {
    @media (width >= 80rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .xl\:focus-within\:m-0 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus-within\:m-1 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus-within\:m-2 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus-within\:m-3 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus-within\:m-4 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus-within\:m-5 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus-within\:m-6 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus-within\:m-8 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus-within\:m-10 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus-within\:m-12 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus-within\:m-16 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus-within\:m-20 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus-within\:m-24 {
    @media (width >= 80rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus-within\:block {
    @media (width >= 80rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .xl\:focus-within\:flex {
    @media (width >= 80rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .xl\:focus-within\:grid {
    @media (width >= 80rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .xl\:focus-within\:hidden {
    @media (width >= 80rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .xl\:focus-within\:inline-block {
    @media (width >= 80rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .xl\:focus-within\:inline-flex {
    @media (width >= 80rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .xl\:focus-within\:bg-black {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:focus-within\:bg-gray-50 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus-within\:bg-gray-100 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus-within\:bg-gray-200 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus-within\:bg-gray-300 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus-within\:bg-gray-400 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus-within\:bg-gray-500 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus-within\:bg-gray-600 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus-within\:bg-gray-700 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus-within\:bg-gray-800 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus-within\:bg-gray-900 {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus-within\:bg-white {
    @media (width >= 80rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:focus-within\:p-0 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus-within\:p-1 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus-within\:p-2 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus-within\:p-3 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus-within\:p-4 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus-within\:p-5 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus-within\:p-6 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus-within\:p-8 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus-within\:p-10 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus-within\:p-12 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus-within\:p-16 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus-within\:p-20 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus-within\:p-24 {
    @media (width >= 80rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus-within\:text-center {
    @media (width >= 80rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .xl\:focus-within\:text-left {
    @media (width >= 80rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .xl\:focus-within\:text-right {
    @media (width >= 80rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .xl\:focus-within\:text-black {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .xl\:focus-within\:text-gray-50 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus-within\:text-gray-100 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus-within\:text-gray-200 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus-within\:text-gray-300 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus-within\:text-gray-400 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus-within\:text-gray-500 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus-within\:text-gray-600 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus-within\:text-gray-700 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus-within\:text-gray-800 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus-within\:text-gray-900 {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus-within\:text-white {
    @media (width >= 80rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .xl\:hover\:m-0 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xl\:hover\:m-1 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xl\:hover\:m-2 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xl\:hover\:m-3 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xl\:hover\:m-4 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xl\:hover\:m-5 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xl\:hover\:m-6 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xl\:hover\:m-8 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xl\:hover\:m-10 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xl\:hover\:m-12 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xl\:hover\:m-16 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xl\:hover\:m-20 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xl\:hover\:m-24 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xl\:hover\:block {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .xl\:hover\:flex {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .xl\:hover\:grid {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .xl\:hover\:hidden {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .xl\:hover\:inline-block {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .xl\:hover\:inline-flex {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .xl\:hover\:bg-black {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-50 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-100 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-200 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-300 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-400 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-500 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-600 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-700 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-800 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .xl\:hover\:bg-gray-900 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .xl\:hover\:bg-white {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .xl\:hover\:p-0 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .xl\:hover\:p-1 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .xl\:hover\:p-2 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .xl\:hover\:p-3 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .xl\:hover\:p-4 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .xl\:hover\:p-5 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .xl\:hover\:p-6 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .xl\:hover\:p-8 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .xl\:hover\:p-10 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .xl\:hover\:p-12 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .xl\:hover\:p-16 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .xl\:hover\:p-20 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .xl\:hover\:p-24 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .xl\:hover\:text-center {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .xl\:hover\:text-left {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .xl\:hover\:text-right {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .xl\:hover\:text-black {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .xl\:hover\:text-gray-50 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .xl\:hover\:text-gray-100 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .xl\:hover\:text-gray-200 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .xl\:hover\:text-gray-300 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .xl\:hover\:text-gray-400 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .xl\:hover\:text-gray-500 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .xl\:hover\:text-gray-600 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .xl\:hover\:text-gray-700 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .xl\:hover\:text-gray-800 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .xl\:hover\:text-gray-900 {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .xl\:hover\:text-white {
    @media (width >= 80rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .xl\:focus\:m-0 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus\:m-1 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus\:m-2 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus\:m-3 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus\:m-4 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus\:m-5 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus\:m-6 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus\:m-8 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus\:m-10 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus\:m-12 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus\:m-16 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus\:m-20 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus\:m-24 {
    @media (width >= 80rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus\:block {
    @media (width >= 80rem) {
      &:focus {
        display: block;
      }
    }
  }
  .xl\:focus\:flex {
    @media (width >= 80rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .xl\:focus\:grid {
    @media (width >= 80rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .xl\:focus\:hidden {
    @media (width >= 80rem) {
      &:focus {
        display: none;
      }
    }
  }
  .xl\:focus\:inline-block {
    @media (width >= 80rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .xl\:focus\:inline-flex {
    @media (width >= 80rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .xl\:focus\:bg-black {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:focus\:bg-gray-50 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus\:bg-gray-100 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus\:bg-gray-200 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus\:bg-gray-300 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus\:bg-gray-400 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus\:bg-gray-500 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus\:bg-gray-600 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus\:bg-gray-700 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus\:bg-gray-800 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus\:bg-gray-900 {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus\:bg-white {
    @media (width >= 80rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:focus\:p-0 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus\:p-1 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus\:p-2 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus\:p-3 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus\:p-4 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus\:p-5 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus\:p-6 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus\:p-8 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus\:p-10 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus\:p-12 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus\:p-16 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus\:p-20 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus\:p-24 {
    @media (width >= 80rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus\:text-center {
    @media (width >= 80rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .xl\:focus\:text-left {
    @media (width >= 80rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .xl\:focus\:text-right {
    @media (width >= 80rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .xl\:focus\:text-black {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .xl\:focus\:text-gray-50 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus\:text-gray-100 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus\:text-gray-200 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus\:text-gray-300 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus\:text-gray-400 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus\:text-gray-500 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus\:text-gray-600 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus\:text-gray-700 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus\:text-gray-800 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus\:text-gray-900 {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus\:text-white {
    @media (width >= 80rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .xl\:focus-visible\:m-0 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus-visible\:m-1 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus-visible\:m-2 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus-visible\:m-3 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus-visible\:m-4 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus-visible\:m-5 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus-visible\:m-6 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus-visible\:m-8 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus-visible\:m-10 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus-visible\:m-12 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus-visible\:m-16 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus-visible\:m-20 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus-visible\:m-24 {
    @media (width >= 80rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus-visible\:block {
    @media (width >= 80rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .xl\:focus-visible\:flex {
    @media (width >= 80rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .xl\:focus-visible\:grid {
    @media (width >= 80rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .xl\:focus-visible\:hidden {
    @media (width >= 80rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .xl\:focus-visible\:inline-block {
    @media (width >= 80rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .xl\:focus-visible\:inline-flex {
    @media (width >= 80rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .xl\:focus-visible\:bg-black {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-50 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-100 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-200 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-300 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-400 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-500 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-600 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-700 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-800 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus-visible\:bg-gray-900 {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus-visible\:bg-white {
    @media (width >= 80rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:focus-visible\:p-0 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:focus-visible\:p-1 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:focus-visible\:p-2 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:focus-visible\:p-3 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:focus-visible\:p-4 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:focus-visible\:p-5 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:focus-visible\:p-6 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:focus-visible\:p-8 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:focus-visible\:p-10 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:focus-visible\:p-12 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:focus-visible\:p-16 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:focus-visible\:p-20 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:focus-visible\:p-24 {
    @media (width >= 80rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:focus-visible\:text-center {
    @media (width >= 80rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .xl\:focus-visible\:text-left {
    @media (width >= 80rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .xl\:focus-visible\:text-right {
    @media (width >= 80rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .xl\:focus-visible\:text-black {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .xl\:focus-visible\:text-gray-50 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:focus-visible\:text-gray-100 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:focus-visible\:text-gray-200 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:focus-visible\:text-gray-300 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:focus-visible\:text-gray-400 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:focus-visible\:text-gray-500 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:focus-visible\:text-gray-600 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:focus-visible\:text-gray-700 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:focus-visible\:text-gray-800 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:focus-visible\:text-gray-900 {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:focus-visible\:text-white {
    @media (width >= 80rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .xl\:active\:m-0 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:active\:m-1 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:active\:m-2 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:active\:m-3 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:active\:m-4 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:active\:m-5 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:active\:m-6 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:active\:m-8 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:active\:m-10 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:active\:m-12 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:active\:m-16 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:active\:m-20 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:active\:m-24 {
    @media (width >= 80rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:active\:block {
    @media (width >= 80rem) {
      &:active {
        display: block;
      }
    }
  }
  .xl\:active\:flex {
    @media (width >= 80rem) {
      &:active {
        display: flex;
      }
    }
  }
  .xl\:active\:grid {
    @media (width >= 80rem) {
      &:active {
        display: grid;
      }
    }
  }
  .xl\:active\:hidden {
    @media (width >= 80rem) {
      &:active {
        display: none;
      }
    }
  }
  .xl\:active\:inline-block {
    @media (width >= 80rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .xl\:active\:inline-flex {
    @media (width >= 80rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .xl\:active\:bg-black {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:active\:bg-gray-50 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:active\:bg-gray-100 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:active\:bg-gray-200 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:active\:bg-gray-300 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:active\:bg-gray-400 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:active\:bg-gray-500 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:active\:bg-gray-600 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:active\:bg-gray-700 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:active\:bg-gray-800 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:active\:bg-gray-900 {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:active\:bg-white {
    @media (width >= 80rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:active\:p-0 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:active\:p-1 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:active\:p-2 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:active\:p-3 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:active\:p-4 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:active\:p-5 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:active\:p-6 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:active\:p-8 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:active\:p-10 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:active\:p-12 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:active\:p-16 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:active\:p-20 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:active\:p-24 {
    @media (width >= 80rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:active\:text-center {
    @media (width >= 80rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .xl\:active\:text-left {
    @media (width >= 80rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .xl\:active\:text-right {
    @media (width >= 80rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .xl\:active\:text-black {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .xl\:active\:text-gray-50 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:active\:text-gray-100 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:active\:text-gray-200 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:active\:text-gray-300 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:active\:text-gray-400 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:active\:text-gray-500 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:active\:text-gray-600 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:active\:text-gray-700 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:active\:text-gray-800 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:active\:text-gray-900 {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:active\:text-white {
    @media (width >= 80rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .xl\:disabled\:m-0 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:disabled\:m-1 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:disabled\:m-2 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:disabled\:m-3 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:disabled\:m-4 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:disabled\:m-5 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:disabled\:m-6 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:disabled\:m-8 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:disabled\:m-10 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:disabled\:m-12 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:disabled\:m-16 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:disabled\:m-20 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:disabled\:m-24 {
    @media (width >= 80rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:disabled\:block {
    @media (width >= 80rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .xl\:disabled\:flex {
    @media (width >= 80rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .xl\:disabled\:grid {
    @media (width >= 80rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .xl\:disabled\:hidden {
    @media (width >= 80rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .xl\:disabled\:inline-block {
    @media (width >= 80rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .xl\:disabled\:inline-flex {
    @media (width >= 80rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .xl\:disabled\:bg-black {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .xl\:disabled\:bg-gray-50 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .xl\:disabled\:bg-gray-100 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .xl\:disabled\:bg-gray-200 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .xl\:disabled\:bg-gray-300 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .xl\:disabled\:bg-gray-400 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .xl\:disabled\:bg-gray-500 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .xl\:disabled\:bg-gray-600 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .xl\:disabled\:bg-gray-700 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .xl\:disabled\:bg-gray-800 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .xl\:disabled\:bg-gray-900 {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .xl\:disabled\:bg-white {
    @media (width >= 80rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .xl\:disabled\:p-0 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .xl\:disabled\:p-1 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .xl\:disabled\:p-2 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .xl\:disabled\:p-3 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .xl\:disabled\:p-4 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .xl\:disabled\:p-5 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .xl\:disabled\:p-6 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .xl\:disabled\:p-8 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .xl\:disabled\:p-10 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .xl\:disabled\:p-12 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .xl\:disabled\:p-16 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .xl\:disabled\:p-20 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .xl\:disabled\:p-24 {
    @media (width >= 80rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .xl\:disabled\:text-center {
    @media (width >= 80rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .xl\:disabled\:text-left {
    @media (width >= 80rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .xl\:disabled\:text-right {
    @media (width >= 80rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .xl\:disabled\:text-black {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .xl\:disabled\:text-gray-50 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .xl\:disabled\:text-gray-100 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .xl\:disabled\:text-gray-200 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .xl\:disabled\:text-gray-300 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .xl\:disabled\:text-gray-400 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .xl\:disabled\:text-gray-500 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .xl\:disabled\:text-gray-600 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .xl\:disabled\:text-gray-700 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .xl\:disabled\:text-gray-800 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .xl\:disabled\:text-gray-900 {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .xl\:disabled\:text-white {
    @media (width >= 80rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:group-hover\:m-0 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-1 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-2 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-3 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-4 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-5 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-6 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-8 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-10 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-12 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-16 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-20 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .\32 xl\:group-hover\:m-24 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .\32 xl\:group-hover\:block {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .\32 xl\:group-hover\:flex {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .\32 xl\:group-hover\:grid {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .\32 xl\:group-hover\:hidden {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .\32 xl\:group-hover\:inline-block {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .\32 xl\:group-hover\:inline-flex {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-black {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-50 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-100 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-200 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-300 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-400 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-500 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-600 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-700 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-800 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-gray-900 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .\32 xl\:group-hover\:bg-white {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-0 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-1 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-2 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-3 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-4 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-5 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-6 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-8 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-10 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-12 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-16 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-20 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .\32 xl\:group-hover\:p-24 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-center {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-left {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-right {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-black {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-50 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-100 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-200 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-300 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-400 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-500 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-600 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-700 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-800 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-gray-900 {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .\32 xl\:group-hover\:text-white {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .\32 xl\:peer-checked\:m-0 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:peer-checked\:m-1 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:peer-checked\:m-2 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:peer-checked\:m-3 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:peer-checked\:m-4 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:peer-checked\:m-5 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:peer-checked\:m-6 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:peer-checked\:m-8 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:peer-checked\:m-10 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:peer-checked\:m-12 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:peer-checked\:m-16 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:peer-checked\:m-20 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:peer-checked\:m-24 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:peer-checked\:block {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: block;
      }
    }
  }
  .\32 xl\:peer-checked\:flex {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: flex;
      }
    }
  }
  .\32 xl\:peer-checked\:grid {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: grid;
      }
    }
  }
  .\32 xl\:peer-checked\:hidden {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: none;
      }
    }
  }
  .\32 xl\:peer-checked\:inline-block {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-block;
      }
    }
  }
  .\32 xl\:peer-checked\:inline-flex {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:peer-checked\:bg-black {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-50 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-100 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-200 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-300 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-400 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-500 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-600 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-700 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-800 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-gray-900 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:peer-checked\:bg-white {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:peer-checked\:p-0 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:peer-checked\:p-1 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:peer-checked\:p-2 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:peer-checked\:p-3 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:peer-checked\:p-4 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:peer-checked\:p-5 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:peer-checked\:p-6 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:peer-checked\:p-8 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:peer-checked\:p-10 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:peer-checked\:p-12 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:peer-checked\:p-16 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:peer-checked\:p-20 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:peer-checked\:p-24 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:peer-checked\:text-center {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: center;
      }
    }
  }
  .\32 xl\:peer-checked\:text-left {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: left;
      }
    }
  }
  .\32 xl\:peer-checked\:text-right {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        text-align: right;
      }
    }
  }
  .\32 xl\:peer-checked\:text-black {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-50 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-100 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-200 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-300 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-400 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-500 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-600 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-700 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-800 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:peer-checked\:text-gray-900 {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:peer-checked\:text-white {
    @media (width >= 96rem) {
      &:is(:where(.peer):checked ~ *) {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:visited\:m-0 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:visited\:m-1 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:visited\:m-2 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:visited\:m-3 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:visited\:m-4 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:visited\:m-5 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:visited\:m-6 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:visited\:m-8 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:visited\:m-10 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:visited\:m-12 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:visited\:m-16 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:visited\:m-20 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:visited\:m-24 {
    @media (width >= 96rem) {
      &:visited {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:visited\:block {
    @media (width >= 96rem) {
      &:visited {
        display: block;
      }
    }
  }
  .\32 xl\:visited\:flex {
    @media (width >= 96rem) {
      &:visited {
        display: flex;
      }
    }
  }
  .\32 xl\:visited\:grid {
    @media (width >= 96rem) {
      &:visited {
        display: grid;
      }
    }
  }
  .\32 xl\:visited\:hidden {
    @media (width >= 96rem) {
      &:visited {
        display: none;
      }
    }
  }
  .\32 xl\:visited\:inline-block {
    @media (width >= 96rem) {
      &:visited {
        display: inline-block;
      }
    }
  }
  .\32 xl\:visited\:inline-flex {
    @media (width >= 96rem) {
      &:visited {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:visited\:bg-black {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-50 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-100 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-200 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-300 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-400 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-500 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-600 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-700 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-800 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:visited\:bg-gray-900 {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:visited\:bg-white {
    @media (width >= 96rem) {
      &:visited {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:visited\:p-0 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:visited\:p-1 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:visited\:p-2 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:visited\:p-3 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:visited\:p-4 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:visited\:p-5 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:visited\:p-6 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:visited\:p-8 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:visited\:p-10 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:visited\:p-12 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:visited\:p-16 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:visited\:p-20 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:visited\:p-24 {
    @media (width >= 96rem) {
      &:visited {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:visited\:text-center {
    @media (width >= 96rem) {
      &:visited {
        text-align: center;
      }
    }
  }
  .\32 xl\:visited\:text-left {
    @media (width >= 96rem) {
      &:visited {
        text-align: left;
      }
    }
  }
  .\32 xl\:visited\:text-right {
    @media (width >= 96rem) {
      &:visited {
        text-align: right;
      }
    }
  }
  .\32 xl\:visited\:text-black {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:visited\:text-gray-50 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:visited\:text-gray-100 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:visited\:text-gray-200 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:visited\:text-gray-300 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:visited\:text-gray-400 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:visited\:text-gray-500 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:visited\:text-gray-600 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:visited\:text-gray-700 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:visited\:text-gray-800 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:visited\:text-gray-900 {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:visited\:text-white {
    @media (width >= 96rem) {
      &:visited {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:checked\:m-0 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:checked\:m-1 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:checked\:m-2 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:checked\:m-3 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:checked\:m-4 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:checked\:m-5 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:checked\:m-6 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:checked\:m-8 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:checked\:m-10 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:checked\:m-12 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:checked\:m-16 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:checked\:m-20 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:checked\:m-24 {
    @media (width >= 96rem) {
      &:checked {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:checked\:block {
    @media (width >= 96rem) {
      &:checked {
        display: block;
      }
    }
  }
  .\32 xl\:checked\:flex {
    @media (width >= 96rem) {
      &:checked {
        display: flex;
      }
    }
  }
  .\32 xl\:checked\:grid {
    @media (width >= 96rem) {
      &:checked {
        display: grid;
      }
    }
  }
  .\32 xl\:checked\:hidden {
    @media (width >= 96rem) {
      &:checked {
        display: none;
      }
    }
  }
  .\32 xl\:checked\:inline-block {
    @media (width >= 96rem) {
      &:checked {
        display: inline-block;
      }
    }
  }
  .\32 xl\:checked\:inline-flex {
    @media (width >= 96rem) {
      &:checked {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:checked\:bg-black {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-50 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-100 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-200 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-300 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-400 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-500 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-600 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-700 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-800 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:checked\:bg-gray-900 {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:checked\:bg-white {
    @media (width >= 96rem) {
      &:checked {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:checked\:p-0 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:checked\:p-1 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:checked\:p-2 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:checked\:p-3 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:checked\:p-4 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:checked\:p-5 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:checked\:p-6 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:checked\:p-8 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:checked\:p-10 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:checked\:p-12 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:checked\:p-16 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:checked\:p-20 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:checked\:p-24 {
    @media (width >= 96rem) {
      &:checked {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:checked\:text-center {
    @media (width >= 96rem) {
      &:checked {
        text-align: center;
      }
    }
  }
  .\32 xl\:checked\:text-left {
    @media (width >= 96rem) {
      &:checked {
        text-align: left;
      }
    }
  }
  .\32 xl\:checked\:text-right {
    @media (width >= 96rem) {
      &:checked {
        text-align: right;
      }
    }
  }
  .\32 xl\:checked\:text-black {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:checked\:text-gray-50 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:checked\:text-gray-100 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:checked\:text-gray-200 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:checked\:text-gray-300 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:checked\:text-gray-400 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:checked\:text-gray-500 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:checked\:text-gray-600 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:checked\:text-gray-700 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:checked\:text-gray-800 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:checked\:text-gray-900 {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:checked\:text-white {
    @media (width >= 96rem) {
      &:checked {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:focus-within\:m-0 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus-within\:m-1 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus-within\:m-2 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus-within\:m-3 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus-within\:m-4 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus-within\:m-5 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus-within\:m-6 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus-within\:m-8 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus-within\:m-10 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus-within\:m-12 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus-within\:m-16 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus-within\:m-20 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus-within\:m-24 {
    @media (width >= 96rem) {
      &:focus-within {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus-within\:block {
    @media (width >= 96rem) {
      &:focus-within {
        display: block;
      }
    }
  }
  .\32 xl\:focus-within\:flex {
    @media (width >= 96rem) {
      &:focus-within {
        display: flex;
      }
    }
  }
  .\32 xl\:focus-within\:grid {
    @media (width >= 96rem) {
      &:focus-within {
        display: grid;
      }
    }
  }
  .\32 xl\:focus-within\:hidden {
    @media (width >= 96rem) {
      &:focus-within {
        display: none;
      }
    }
  }
  .\32 xl\:focus-within\:inline-block {
    @media (width >= 96rem) {
      &:focus-within {
        display: inline-block;
      }
    }
  }
  .\32 xl\:focus-within\:inline-flex {
    @media (width >= 96rem) {
      &:focus-within {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:focus-within\:bg-black {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-50 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-100 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-200 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-300 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-400 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-500 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-600 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-700 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-800 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus-within\:bg-gray-900 {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus-within\:bg-white {
    @media (width >= 96rem) {
      &:focus-within {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:focus-within\:p-0 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus-within\:p-1 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus-within\:p-2 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus-within\:p-3 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus-within\:p-4 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus-within\:p-5 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus-within\:p-6 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus-within\:p-8 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus-within\:p-10 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus-within\:p-12 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus-within\:p-16 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus-within\:p-20 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus-within\:p-24 {
    @media (width >= 96rem) {
      &:focus-within {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus-within\:text-center {
    @media (width >= 96rem) {
      &:focus-within {
        text-align: center;
      }
    }
  }
  .\32 xl\:focus-within\:text-left {
    @media (width >= 96rem) {
      &:focus-within {
        text-align: left;
      }
    }
  }
  .\32 xl\:focus-within\:text-right {
    @media (width >= 96rem) {
      &:focus-within {
        text-align: right;
      }
    }
  }
  .\32 xl\:focus-within\:text-black {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-50 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-100 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-200 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-300 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-400 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-500 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-600 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-700 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-800 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus-within\:text-gray-900 {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus-within\:text-white {
    @media (width >= 96rem) {
      &:focus-within {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:hover\:m-0 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .\32 xl\:hover\:m-1 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .\32 xl\:hover\:m-2 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .\32 xl\:hover\:m-3 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .\32 xl\:hover\:m-4 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .\32 xl\:hover\:m-5 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .\32 xl\:hover\:m-6 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .\32 xl\:hover\:m-8 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .\32 xl\:hover\:m-10 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .\32 xl\:hover\:m-12 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .\32 xl\:hover\:m-16 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .\32 xl\:hover\:m-20 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .\32 xl\:hover\:m-24 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          margin: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .\32 xl\:hover\:block {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: block;
        }
      }
    }
  }
  .\32 xl\:hover\:flex {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: flex;
        }
      }
    }
  }
  .\32 xl\:hover\:grid {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: grid;
        }
      }
    }
  }
  .\32 xl\:hover\:hidden {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: none;
        }
      }
    }
  }
  .\32 xl\:hover\:inline-block {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-block;
        }
      }
    }
  }
  .\32 xl\:hover\:inline-flex {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          display: inline-flex;
        }
      }
    }
  }
  .\32 xl\:hover\:bg-black {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-50 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-50);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-100 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-200 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-300 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-300);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-400 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-400);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-500 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-500);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-600 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-600);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-700 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-800 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-gray-900 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-900);
        }
      }
    }
  }
  .\32 xl\:hover\:bg-white {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-white);
        }
      }
    }
  }
  .\32 xl\:hover\:p-0 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 0);
        }
      }
    }
  }
  .\32 xl\:hover\:p-1 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 1);
        }
      }
    }
  }
  .\32 xl\:hover\:p-2 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 2);
        }
      }
    }
  }
  .\32 xl\:hover\:p-3 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .\32 xl\:hover\:p-4 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 4);
        }
      }
    }
  }
  .\32 xl\:hover\:p-5 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 5);
        }
      }
    }
  }
  .\32 xl\:hover\:p-6 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .\32 xl\:hover\:p-8 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .\32 xl\:hover\:p-10 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 10);
        }
      }
    }
  }
  .\32 xl\:hover\:p-12 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 12);
        }
      }
    }
  }
  .\32 xl\:hover\:p-16 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 16);
        }
      }
    }
  }
  .\32 xl\:hover\:p-20 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 20);
        }
      }
    }
  }
  .\32 xl\:hover\:p-24 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          padding: calc(var(--spacing) * 24);
        }
      }
    }
  }
  .\32 xl\:hover\:text-center {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          text-align: center;
        }
      }
    }
  }
  .\32 xl\:hover\:text-left {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          text-align: left;
        }
      }
    }
  }
  .\32 xl\:hover\:text-right {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          text-align: right;
        }
      }
    }
  }
  .\32 xl\:hover\:text-black {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-black);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-50 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-50);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-100 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-100);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-200 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-200);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-300 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-300);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-400 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-400);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-500 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-500);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-600 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-600);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-700 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-800 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-800);
        }
      }
    }
  }
  .\32 xl\:hover\:text-gray-900 {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
    }
  }
  .\32 xl\:hover\:text-white {
    @media (width >= 96rem) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  .\32 xl\:focus\:m-0 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus\:m-1 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus\:m-2 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus\:m-3 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus\:m-4 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus\:m-5 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus\:m-6 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus\:m-8 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus\:m-10 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus\:m-12 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus\:m-16 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus\:m-20 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus\:m-24 {
    @media (width >= 96rem) {
      &:focus {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus\:block {
    @media (width >= 96rem) {
      &:focus {
        display: block;
      }
    }
  }
  .\32 xl\:focus\:flex {
    @media (width >= 96rem) {
      &:focus {
        display: flex;
      }
    }
  }
  .\32 xl\:focus\:grid {
    @media (width >= 96rem) {
      &:focus {
        display: grid;
      }
    }
  }
  .\32 xl\:focus\:hidden {
    @media (width >= 96rem) {
      &:focus {
        display: none;
      }
    }
  }
  .\32 xl\:focus\:inline-block {
    @media (width >= 96rem) {
      &:focus {
        display: inline-block;
      }
    }
  }
  .\32 xl\:focus\:inline-flex {
    @media (width >= 96rem) {
      &:focus {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:focus\:bg-black {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-50 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-100 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-200 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-300 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-400 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-500 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-600 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-700 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-800 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus\:bg-gray-900 {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus\:bg-white {
    @media (width >= 96rem) {
      &:focus {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:focus\:p-0 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus\:p-1 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus\:p-2 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus\:p-3 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus\:p-4 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus\:p-5 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus\:p-6 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus\:p-8 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus\:p-10 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus\:p-12 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus\:p-16 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus\:p-20 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus\:p-24 {
    @media (width >= 96rem) {
      &:focus {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus\:text-center {
    @media (width >= 96rem) {
      &:focus {
        text-align: center;
      }
    }
  }
  .\32 xl\:focus\:text-left {
    @media (width >= 96rem) {
      &:focus {
        text-align: left;
      }
    }
  }
  .\32 xl\:focus\:text-right {
    @media (width >= 96rem) {
      &:focus {
        text-align: right;
      }
    }
  }
  .\32 xl\:focus\:text-black {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus\:text-gray-50 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus\:text-gray-100 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus\:text-gray-200 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus\:text-gray-300 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus\:text-gray-400 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus\:text-gray-500 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus\:text-gray-600 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus\:text-gray-700 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus\:text-gray-800 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus\:text-gray-900 {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus\:text-white {
    @media (width >= 96rem) {
      &:focus {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:focus-visible\:m-0 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus-visible\:m-1 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus-visible\:m-2 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus-visible\:m-3 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus-visible\:m-4 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus-visible\:m-5 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus-visible\:m-6 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus-visible\:m-8 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus-visible\:m-10 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus-visible\:m-12 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus-visible\:m-16 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus-visible\:m-20 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus-visible\:m-24 {
    @media (width >= 96rem) {
      &:focus-visible {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus-visible\:block {
    @media (width >= 96rem) {
      &:focus-visible {
        display: block;
      }
    }
  }
  .\32 xl\:focus-visible\:flex {
    @media (width >= 96rem) {
      &:focus-visible {
        display: flex;
      }
    }
  }
  .\32 xl\:focus-visible\:grid {
    @media (width >= 96rem) {
      &:focus-visible {
        display: grid;
      }
    }
  }
  .\32 xl\:focus-visible\:hidden {
    @media (width >= 96rem) {
      &:focus-visible {
        display: none;
      }
    }
  }
  .\32 xl\:focus-visible\:inline-block {
    @media (width >= 96rem) {
      &:focus-visible {
        display: inline-block;
      }
    }
  }
  .\32 xl\:focus-visible\:inline-flex {
    @media (width >= 96rem) {
      &:focus-visible {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:focus-visible\:bg-black {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-50 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-100 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-200 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-300 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-400 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-500 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-600 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-700 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-800 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-gray-900 {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus-visible\:bg-white {
    @media (width >= 96rem) {
      &:focus-visible {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:focus-visible\:p-0 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:focus-visible\:p-1 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:focus-visible\:p-2 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:focus-visible\:p-3 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:focus-visible\:p-4 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:focus-visible\:p-5 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:focus-visible\:p-6 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:focus-visible\:p-8 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:focus-visible\:p-10 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:focus-visible\:p-12 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:focus-visible\:p-16 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:focus-visible\:p-20 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:focus-visible\:p-24 {
    @media (width >= 96rem) {
      &:focus-visible {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:focus-visible\:text-center {
    @media (width >= 96rem) {
      &:focus-visible {
        text-align: center;
      }
    }
  }
  .\32 xl\:focus-visible\:text-left {
    @media (width >= 96rem) {
      &:focus-visible {
        text-align: left;
      }
    }
  }
  .\32 xl\:focus-visible\:text-right {
    @media (width >= 96rem) {
      &:focus-visible {
        text-align: right;
      }
    }
  }
  .\32 xl\:focus-visible\:text-black {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-50 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-100 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-200 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-300 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-400 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-500 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-600 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-700 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-800 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:focus-visible\:text-gray-900 {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:focus-visible\:text-white {
    @media (width >= 96rem) {
      &:focus-visible {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:active\:m-0 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:active\:m-1 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:active\:m-2 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:active\:m-3 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:active\:m-4 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:active\:m-5 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:active\:m-6 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:active\:m-8 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:active\:m-10 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:active\:m-12 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:active\:m-16 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:active\:m-20 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:active\:m-24 {
    @media (width >= 96rem) {
      &:active {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:active\:block {
    @media (width >= 96rem) {
      &:active {
        display: block;
      }
    }
  }
  .\32 xl\:active\:flex {
    @media (width >= 96rem) {
      &:active {
        display: flex;
      }
    }
  }
  .\32 xl\:active\:grid {
    @media (width >= 96rem) {
      &:active {
        display: grid;
      }
    }
  }
  .\32 xl\:active\:hidden {
    @media (width >= 96rem) {
      &:active {
        display: none;
      }
    }
  }
  .\32 xl\:active\:inline-block {
    @media (width >= 96rem) {
      &:active {
        display: inline-block;
      }
    }
  }
  .\32 xl\:active\:inline-flex {
    @media (width >= 96rem) {
      &:active {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:active\:bg-black {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:active\:bg-gray-50 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:active\:bg-gray-100 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:active\:bg-gray-200 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:active\:bg-gray-300 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:active\:bg-gray-400 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:active\:bg-gray-500 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:active\:bg-gray-600 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:active\:bg-gray-700 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:active\:bg-gray-800 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:active\:bg-gray-900 {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:active\:bg-white {
    @media (width >= 96rem) {
      &:active {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:active\:p-0 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:active\:p-1 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:active\:p-2 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:active\:p-3 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:active\:p-4 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:active\:p-5 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:active\:p-6 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:active\:p-8 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:active\:p-10 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:active\:p-12 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:active\:p-16 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:active\:p-20 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:active\:p-24 {
    @media (width >= 96rem) {
      &:active {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:active\:text-center {
    @media (width >= 96rem) {
      &:active {
        text-align: center;
      }
    }
  }
  .\32 xl\:active\:text-left {
    @media (width >= 96rem) {
      &:active {
        text-align: left;
      }
    }
  }
  .\32 xl\:active\:text-right {
    @media (width >= 96rem) {
      &:active {
        text-align: right;
      }
    }
  }
  .\32 xl\:active\:text-black {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:active\:text-gray-50 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:active\:text-gray-100 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:active\:text-gray-200 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:active\:text-gray-300 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:active\:text-gray-400 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:active\:text-gray-500 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:active\:text-gray-600 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:active\:text-gray-700 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:active\:text-gray-800 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:active\:text-gray-900 {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:active\:text-white {
    @media (width >= 96rem) {
      &:active {
        color: var(--color-white);
      }
    }
  }
  .\32 xl\:disabled\:m-0 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:disabled\:m-1 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:disabled\:m-2 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:disabled\:m-3 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:disabled\:m-4 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:disabled\:m-5 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:disabled\:m-6 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:disabled\:m-8 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:disabled\:m-10 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:disabled\:m-12 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:disabled\:m-16 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:disabled\:m-20 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:disabled\:m-24 {
    @media (width >= 96rem) {
      &:disabled {
        margin: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:disabled\:block {
    @media (width >= 96rem) {
      &:disabled {
        display: block;
      }
    }
  }
  .\32 xl\:disabled\:flex {
    @media (width >= 96rem) {
      &:disabled {
        display: flex;
      }
    }
  }
  .\32 xl\:disabled\:grid {
    @media (width >= 96rem) {
      &:disabled {
        display: grid;
      }
    }
  }
  .\32 xl\:disabled\:hidden {
    @media (width >= 96rem) {
      &:disabled {
        display: none;
      }
    }
  }
  .\32 xl\:disabled\:inline-block {
    @media (width >= 96rem) {
      &:disabled {
        display: inline-block;
      }
    }
  }
  .\32 xl\:disabled\:inline-flex {
    @media (width >= 96rem) {
      &:disabled {
        display: inline-flex;
      }
    }
  }
  .\32 xl\:disabled\:bg-black {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-black);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-50 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-100 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-200 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-300 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-400 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-500 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-600 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-700 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-800 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:disabled\:bg-gray-900 {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:disabled\:bg-white {
    @media (width >= 96rem) {
      &:disabled {
        background-color: var(--color-white);
      }
    }
  }
  .\32 xl\:disabled\:p-0 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 0);
      }
    }
  }
  .\32 xl\:disabled\:p-1 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 1);
      }
    }
  }
  .\32 xl\:disabled\:p-2 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .\32 xl\:disabled\:p-3 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\32 xl\:disabled\:p-4 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 4);
      }
    }
  }
  .\32 xl\:disabled\:p-5 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 5);
      }
    }
  }
  .\32 xl\:disabled\:p-6 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 6);
      }
    }
  }
  .\32 xl\:disabled\:p-8 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 8);
      }
    }
  }
  .\32 xl\:disabled\:p-10 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 10);
      }
    }
  }
  .\32 xl\:disabled\:p-12 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 12);
      }
    }
  }
  .\32 xl\:disabled\:p-16 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 16);
      }
    }
  }
  .\32 xl\:disabled\:p-20 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 20);
      }
    }
  }
  .\32 xl\:disabled\:p-24 {
    @media (width >= 96rem) {
      &:disabled {
        padding: calc(var(--spacing) * 24);
      }
    }
  }
  .\32 xl\:disabled\:text-center {
    @media (width >= 96rem) {
      &:disabled {
        text-align: center;
      }
    }
  }
  .\32 xl\:disabled\:text-left {
    @media (width >= 96rem) {
      &:disabled {
        text-align: left;
      }
    }
  }
  .\32 xl\:disabled\:text-right {
    @media (width >= 96rem) {
      &:disabled {
        text-align: right;
      }
    }
  }
  .\32 xl\:disabled\:text-black {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-black);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-50 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-50);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-100 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-100);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-200 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-200);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-300 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-300);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-400 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-400);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-500 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-500);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-600 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-600);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-700 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-700);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-800 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-800);
      }
    }
  }
  .\32 xl\:disabled\:text-gray-900 {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-gray-900);
      }
    }
  }
  .\32 xl\:disabled\:text-white {
    @media (width >= 96rem) {
      &:disabled {
        color: var(--color-white);
      }
    }
  }
}