@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,800&display=swap");
@import 'toastify.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-size: 16px;
    @apply font-sans;
  }

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

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  }

  input:-webkit-autofill {
    -webkit-text-fill-color: #1f1f1f !important;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary disabled:text-white disabled:bg-aluminium disabled:bg-none;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #1f1f1f !important;
}

@keyframes shake {
  0% {
    left: 0;
  }
  10% {
    left: 10px;
  }
  20% {
    left: 0;
  }
  30% {
    left: -7px;
  }
  40% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  60% {
    left: 0;
  }
  70% {
    left: -3px;
  }
  80% {
    left: 0;
  }
  90% {
    left: 1px;
  }
  100% {
    left: 0;
  }
}

.c-textfield-invalid {
  animation: shake 400ms ease 500ms;
  @apply relative !border-red-500;
}

.c-textfield-invalid:focus {
  @apply !border-red-500;
}

.c-textfield-invalid ~ label, .c-textfield-invalid:focus ~ label {
  @apply !text-red-500;
}

.v-text-field__details {
  @apply flex justify-center absolute bottom-full text-xs text-center text-white pb-2 w-full z-10;
}

.v-text-field__details:after {
  content: '';
  @apply hidden absolute bottom-1 border border-solid border-4 border-transparent left-1/2 transform rotate-45 -translate-x-1/2 -z-10;
}

.c-textfield-invalid:focus ~ .v-text-field__details:after, .c-textfield-invalid:hover ~ .v-text-field__details:after {
  @apply inline border-red-500;
}

.v-text-field__details .v-messages {
  @apply hidden bg-red-500 rounded-md px-2 py-1 transition-none transform-none z-10;
}

.c-textfield-invalid:focus ~ .v-text-field__details .v-messages, .c-textfield-invalid:hover ~ .v-text-field__details .v-messages {
  @apply flex;
}

/*region [SweetAlert2]*/
.swal2-popup {
  @apply overflow-hidden rounded-lg max-w-full p-0 select-none !important;
}

.swal2-popup .swal2-image {
  @apply mt-4 mb-1 w-8 h-8;
}

.swal2-popup .swal2-title {
  @apply text-base text-seagreen-700 font-semibold leading-normal;
}

.swal2-popup .swal2-html-container {
  @apply text-sm text-gray-900 font-medium leading-normal !important;
}

.swal2-popup .swal2-actions {
  @apply w-full justify-between border-t mt-3 border-solid border-concrete;
}

.swal2-popup .swal2-actions .btn {
  @apply flex-1 h-10 text-sm text-gray-900 font-medium bg-white hover:bg-white outline-none ring-0 border-none !important;
}

.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  @apply bg-none !important;
}

.swal2-popup .swal2-actions .btn ~ .btn {
  @apply border-l border-solid border-silver-200;
}

/*endregion*/