* {
  -webkit-tap-highlight-color: transparent;
}

[list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:root {
  --color-primary: #667eea;
  --color-secondary: #34d399;
  --color-accent: #f97316;
  --color-background: #fbfcfd;
  --color-surface: #f1f5f9;
  --color-error: #f43f5e;
  --color-success: #10b981;
}

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

@layer base {
  html {
    min-height: stretch;
    @apply flex flex-col overflow-y-scroll;
  }

  body {
    scrollbar-width: thin;
    scrollbar-color: darkgrey rgba(0, 0, 0, 0.3);
  }

  body::-webkit-scrollbar {
    width: 0.6rem;
  }

  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }

  body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
  }

  body,
  #root {
    @apply flex flex-col flex-1 h-full;
  }

  /* see: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
  .grecaptcha-badge {
    visibility: hidden;
  }

  .form-tick:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
  }
}

@layer components {
  .form-container {
    @apply flex flex-col w-full max-w-xs py-4 mx-auto space-y-4 sm:max-w-sm;
  }

  /* #region form-field-radio-toggle */
  .form-field-radio-toggle {
    grid-template-columns: 1fr auto 1fr;
  }

  .form-field-radio-toggle > label {
    grid-column: span 2 / span 2;
    opacity: 0.4;
  }

  .form-field-radio-toggle > div > div {
    transform: translateX(calc(100% - 4px));
  }

  .form-field-radio-toggle > :checked + label + div > div {
    transform: translateX(0);
  }

  .form-field-radio-toggle > label:first-of-type {
    grid-column-start: 1;
    grid-template-columns: 1fr calc(3rem + 2px);
  }

  .form-field-radio-toggle > label:first-of-type > span {
    grid-column-start: 1;
  }

  .form-field-radio-toggle > label:last-of-type {
    grid-column-start: 2;
    grid-template-columns: calc(3rem + 2px) 1fr;
  }

  .form-field-radio-toggle > :checked + label:last-of-type {
    grid-column-start: 3;
  }

  .form-field-radio-toggle > label:last-of-type > span {
    grid-column-start: 2;
  }

  .form-field-radio-toggle > :checked + label:last-of-type > span {
    grid-column-start: 1;
  }

  .form-field-radio-toggle > :checked + label {
    opacity: 1;
    grid-template-columns: 1fr;
    grid-column: span 1 / span 1;
  }

  /* #endregion */
}

@layer utilities {
  /* see: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
  .grecaptcha-show .grecaptcha-badge {
    visibility: visible;
  }

  .bg-blur {
    backdrop-filter: blur(2px);
  }

  .bg-mask-x-transparent {
    mask-image: linear-gradient(
      to right,
      transparent,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 1),
      transparent
    );
  }

  .justify-stretch {
    justify-content: stretch;
  }

  .grid-stack > * {
    grid-area: 1 / 1 / -1 / -1;
  }

  .grid-cols-fill-200 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  @layer utilities {
    .overlay-ring {
      @apply relative;
    }
    .overlay-ring::before {
      @apply ring;
      @apply ring-inset;
      @apply absolute;
      @apply inset-0;
      @apply z-50;
      @apply pointer-events-none;
      content: '';
    }
  }
}