@use '~tailwindcss/dist/base';
@use '~tailwindcss/dist/components';
@use '~tailwindcss/dist/utilities';

body {
  @extend .p-4;
}

.nav {
  @extend .my-4, .bg-green-400, .text-white, .text-center, .flex, .flex-wrap;

  a {
    @extend .p-2, .flex-grow;

    &.active {
      @extend .bg-green-600;
    }
  }
}

button {
  @extend .w-44, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;

  &:disabled {
    @extend .bg-purple-300, .cursor-not-allowed;
  }
}

h2 {
  @extend .mt-2, .font-bold, .text-2xl;
}

input:not([type='radio']):not([type='checkbox']),
textarea {
  @extend .bg-gray-900, .text-white, .p-2, .w-full;
}

textarea {
  @extend .h-64;
}

.group {
  @extend .border, .mt-4, .rounded, .bg-gray-100, .font-mono;

  > div {
    @extend .sm\:flex;

    > * {
      @extend .p-2;
    }

    > :nth-child(1) {
      @extend .sm\:w-1\/4, .font-semibold, .sm\:font-normal, .self-center;
    }

    > :nth-child(2) {
      @extend .sm\:w-3\/4, .break-words, .whitespace-pre-wrap;
    }
  }
}

.error {
  @extend .text-purple-700;
}
