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

@layer base {
  :root {
    --ring: 235 78% 70%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --social-purple: 139 123 255;
  }
}

@layer components {
  .field_with_errors label {
    color: theme("colors.red.600") !important;
  }

  .field_with_errors input {
    border-color: theme("colors.red.500") !important;
  }

  #__authsignal-popup-container {
    z-index: 9999 !important;
    /* radix dialogs stick a `pointer-events: none` on the body, this gets around it */
    pointer-events: auto !important;
  }

  .group--conjunctions {
    display: flex !important;
    align-items: center !important;
  }

  .group-or-rule {
    background-color: theme("colors.white") !important;
  }

  .group-or-rule-container {
    margin-top: theme("spacing.1") !important;
    margin-bottom: theme("spacing.1") !important;
  }

  .group--actions button {
    margin-left: theme("spacing.1") !important;
    margin-right: theme("spacing.1") !important;
  }

  .group-or-rule {
    border-width: 0 !important;
    border-radius: theme("borderRadius.lg") !important;
  }

  .rule {
    background-color: theme("colors.gray.100") !important;
    border-width: 0 !important;
    padding: theme("spacing.6") !important;
  }

  .rule--body {
    display: flex;
    align-items: center;
    padding: theme("spacing.1");
  }

  .rule--header,
  .rule--drag-handler,
  .group--drag-handler {
    opacity: 1 !important;
  }

  .rule--widget {
    display: flex;
    align-items: center;
  }

  .widget--sep {
    align-self: center;
  }

  .rule--widget--TEXT input,
  .rule--widget--NUMBER input,
  .rule--widget--IPV4CIDR input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm !important;
  }

  .widget--valuesrc,
  .group--actions {
    @apply opacity-100 !important;
  }

  .rule--operator {
    flex-shrink: 0;
  }

  .rule--widget--IPV4CIDR .widget--widget {
    margin-bottom: 0 !important;
  }

  .rule--value {
    display: block !important;
  }

  .rule--operator > .rule--operator {
    /* For boolean fields it nests a div with the same class which means the margin is doubled
      so we use this to get rid of it */
    margin-left: 0;
  }

  .rule--operator select,
  .rule--field select,
  .rule--widget select,
  .group--field select {
    @apply block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;
  }

  .query-builder {
    @apply !overflow-visible !font-sans;
  }

  #react-action-locations-map .leaflet-container {
    height: 400px;
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
  }

  #react-action-location-map .leaflet-container {
    height: 240px;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
  }

  .bg-as-grandient {
    background: linear-gradient(87.42deg, #f4f4ff 1.47%, #f1fbff 100%);
  }

  .focus-ring {
    @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-offset-2;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Inspired by https://chakra-ui.com/docs/components/feedback/spinner */
.spinner {
  display: inline-block;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  border-bottom-style: solid;
  border-left-style: solid;
  border-radius: 99999px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: 0.7s linear 0s infinite normal none running spinner;
  width: 1em;
  height: 1em;
  --spinner-size: 1.5rem;
  color: currentcolor;
}

.group {
  border-width: 0 !important;
  background-color: inherit !important;
}