@import 'tailwindcss';

@plugin '@tailwindcss/forms';

@source '../../../login/theme.properties';

@theme {
  --font-*: initial;
  --font-headline: Quicksand, sans-serif;
  --font-body: Open Sans, sans-serif;

  --color-current: currentColor;
  --color-primary: #49b04a;
  --color-primary2: #009f69;
  --color-primary-l1: #66cc68;
  --color-primary-l2: #ebf5eb;
  --color-primary-d1: #407f41;
  --color-primary-d2: #2d4d2e;
  --color-secondary: #008a7b;
  --color-secondary2: #00747e;
  --color-tertiary: #005e71;
  --color-tertiary2: #2f4858;
  --color-dark: #1f2122;
  --color-gray_0: #222222;
  --color-gray_1: #3b3b3b;
  --color-gray_2: #515151;
  --color-gray_3: #626262;
  --color-gray_4: #7e7e7e;
  --color-gray_5: #9e9e9e;
  --color-gray_6: #b1b1b1;
  --color-gray_7: #cfcfcf;
  --color-gray_8: #e1e1e1;
  --color-gray_9: #f7f7f7;
  --color-sky-dark: #0b0f17;
  --color-sky-medium: #3f8bd9;
  --color-sky-light: #9ac7f5;

  --background-image-hills: url('../img/header-background.png');
  --background-image-cryptobot: url('../img/logo.svg');
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  a:not([type='button']) {
    @apply text-primary;
  }
  a:not([type='button']):hover {
    @apply underline;
  }
  hr {
    @apply my-6;
  }
  ol {
    @apply list-decimal pl-5 mb-6;
  }
  ol > li {
    @apply text-sm font-medium text-gray-700;
  }
  ol > li:not(:last-child) {
    @apply mb-2;
  }
  li > *:not(:last-child) {
    @apply mb-2;
  }
  li > br {
    @apply hidden;
  }
  input[type='checkbox'] {
    @apply h-4 w-4 rounded-sm border-gray-300 text-primary focus:ring-primary;
  }
  input[type='radio'] {
    @apply h-4 w-4 border-gray-300 text-primary focus:ring-primary;
  }
}

#kc-terms-text > p {
  @apply mb-6;
}

#reset-login {
  @apply font-body text-sm ml-1;
}

#reset-login > div {
  @apply inline-block relative;
}

#reset-login > div:hover > span {
  @apply block;
}

#reset-login > div > span {
  @apply hidden absolute z-50;
  @apply rounded-sm shadow-md bg-white p-2;
  @apply transform -translate-x-1/2 left-1/2;
  @apply whitespace-nowrap text-gray-700 text-xs;
}

#try-another-way {
  @apply block text-center mt-3;
}

#kc-webauthn-authenticator {
  @apply pointer-events-none;
}

#kc-webauthn-authenticator-label {
  @apply text-gray-900;
}
