@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@300;400;500;600;700&display=swap");
@import "react-toastify/dist/ReactToastify.css";

/* Scoped to `.enso-dashboard, .enso-portal-root` in tailwind config. */
@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-dark {
  filter: invert(90%) hue-rotate(180deg) brightness(1.2);

  img,
  .tsqd-open-btn-container,
  use[href$="#google_color"] {
    filter: invert(90%) hue-rotate(180deg) brightness(1.2);
  }
}

:root {
  --color-primary-rgb: 0 0 0;
  --color-primary-opacity: 90%;
  --color-primary: rgb(var(--color-primary-rgb) / var(--color-primary-opacity));
  --color-accent-rgb: 73 159 75;
  --color-accent-opacity: 100%;
  --color-accent: rgb(var(--color-accent-rgb) / var(--color-accent-opacity));
  --color-danger-rgb: 211 59 11;
  --color-danger-opacity: 100%;
  --color-danger: rgb(var(--color-danger-rgb) / var(--color-danger-opacity));
  --color-invert-rgb: 255 255 255;
  --color-invert-opacity: 100%;
  --color-invert: rgb(var(--color-invert-rgb) / var(--color-invert-opacity));
  --color-background-rgb: 255 255 255;
  --color-background-opacity: 60%;
  --color-background: rgb(
    var(--color-background-rgb) / var(--color-background-opacity)
  );
  --color-background-hex: #fdfcfb;

  --color-dashboard-background-rgb: 239 234 228;
  --color-dashboard-background-opacity: 100%;
  --color-dashboard-background: rgb(
    var(--color-dashboard-background-rgb) /
      var(--color-dashboard-background-opacity)
  );

  --top-bar-height: 3rem;
  --row-height: 2rem;
  --table-row-height: 2.25rem;
  --page-padding-x: 0.8125rem;
  /* The height of the main heading of a page. */
  --heading-height: 2.375rem;
  --heading-padding-x: 0.375rem;
  --heading-padding-y: 0.125rem;
  --input-corner-radius: 0.75rem;
  --small-rectangle-button-corner-radius: 0.375rem;

  /* The height of text not beside an icon. */
  --text-height: 1.5rem;
  --unimportant-opacity: 50%;
  /* The default gap between a subheading and its content. */
  --subheading-gap: 1rem;
  /* The horizontal padding of the entire horizontal list of icons. */
  --icons-padding-x: 0.5rem;
  --project-icon-size: 1.5rem;
  /* The horizontal padding of the large text indicating that a feature is not enabled in the user's
   * current plan. */
  --missing-functionality-text-padding-x: 1rem;
  /* The horizontal gap between each icon in a list of buttons. */
  --buttons-gap: 0.5rem;
  /* The horizontal gap between each icon in a list of icons. */
  --icons-gap: 0.75rem;
  /* The gap between an icon and its associated text. */
  --samples-icon-with-text-gap: 0.375rem;
  /* The horizontal gap between an input and its associated submit button. */
  --input-with-button-gap: 0.25rem;
  /* The horizontal gap between the drive sidebar and the asset tree. */
  --drive-gap: 0.75rem;
  /* The gap between the icon and label of a menu entry or context menu entry. */
  --menu-entry-gap: 0.75rem;
  --menu-entry-corner-radius: 0.5rem;
  /* The vertical gap between items on a page displaying an abnormal status.
   * These include the loading screen and pages for accessing the drive
   * without the appropriate permissions. */
  --status-page-gap: 1rem;
  /* The tighter of the custom line heights. */
  --snug-line-height: 144.5%;
  /* The looser of the custom line heights. */
  --cozy-line-height: 170%;
  --default-backdrop-blur: 64px;
  --default-corner-radius: 1rem;
  --button-focus-ring-corner-radius: 0.5rem;
  --profile-picture-large-size: 8rem;
  --profile-picture-caption-width: 16rem;
  --profile-picture-caption-padding-y: 0.25rem;
  /* Alternate button padding, for buttons that do not use the `button` class. */
  --button-padding-x: 0.5rem;
  --selector-padding-x: 0.625rem;
  --selector-padding-y: 0.25rem;
  --backend-switcher-option-width: 5rem;
  /* The margin surrounding the entire top bar. */
  --top-bar-padding: 0.5625rem;
  /* The gap between each panel in the top bar.*/
  --top-bar-gap: 0.875rem;
  /* The gap between the two panels on the right side of the top bar.*/
  --top-bar-right-gap: 0.5rem;
  /* The vertical gap between the spinner of a new empty project and its text. */
  --new-empty-project-gap: 0.75rem;
  --new-empty-project-spinner-padding: 0.5rem;
  --spinner-fast-transition-duration: 1s;
  --spinner-medium-transition-duration: 5s;
  --spinner-slow-transition-duration: 90s;
  --cell-padding-x: 0.5rem;
  --plus-icon-size: 1.125rem;
  --context-menu-padding: 0.5rem;
  --context-menu-width: 16rem;
  --context-menu-macos-width: 14.375rem;
  --context-menu-entry-padding-x: 0.75rem;
  --json-schema-text-input-width: 10rem;
  --json-schema-object-input-padding: 0.5rem;
  --json-schema-object-key-width: 11rem;
  --json-schema-dropdown-title-width: 3rem;
  --input-padding-x: 0.5rem;
  --multiline-input-padding: 0.5rem;
  /* The default height for an input with a large default size,
   * indicating that the input expects a lot of text (e.g. a paragraph). */
  --paragraph-input-height: 6rem;
  --asset-search-bar-gap: 0.5rem;
  /* The default maximum width of the asset search bar.
   * It is narrower below a certain point, and wider above a certain point. */
  --asset-search-bar-width: 24.5625rem;
  /* The width of the asset search bar on wide screens. */
  --asset-search-bar-wide-width: 33.333333vw;
  --permission-type-selector-width: 28.125rem;
  --payment-form-height: 38.75rem;
  --version-padding: 0.5rem;
  --label-padding-x: 0.5625rem;
  /* The horizontal gap between adjacent color inputs. */
  --colors-gap: 0.25rem;
  /* The vertical gap between adjacent labels. */
  --labels-gap: 0.25rem;
  /* The horizontal gap between a label and its icons. */
  --label-icons-gap: 0.25rem;
  /* The transition duration of an arrow transitioning between two directions. */
  --arrow-transition-duration: 300ms;
  --selection-brush-corner-radius: 0.5rem;
  /* This MUST be in `px` as `border-width` does not understand `rem`. */
  --selection-brush-border-width: 6px;
  --tick-cross-button-margin: 0.125rem;
  --search-suggestions-gap: 0.5rem;
  --search-suggestions-padding: 0.5rem;
  --search-suggestions-list-height: 16rem;
  --search-suggestion-padding-y: 0.25rem;
  --search-suggestion-margin: 0.25rem;
  --close-icon-margin: 0.25rem;
  --date-input-padding: 0.5rem;
  --date-picker-width: 7.5rem;
  --date-cell-width: 1.5rem;
  /* The gap between the date display and the input of the date picker. */
  --date-input-gap: 0.5rem;
  /* The gap between the month display and the calendar of the date picker. */
  --date-input-calendar-gap: 0.5rem;
  --auth-link-padding-x: 0.5rem;
  --auth-link-padding-y: 0.25rem;
  --text-link-padding-x: 0.25rem;

  --drive-bar-gap: 0.625rem;
  --drive-bar-padding-y: 0.125rem;
  /* The gap between each item in the horizontal user bar. */
  --user-bar-gap: 0.5rem;
  /* The gap between a user permission and the corresponding username. */
  --user-permission-gap: 0.75rem;
  --asset-panel-width: 30rem;
  /* The vertical gap between sections of the asset panel. */
  --asset-panel-gap: 2rem;
  --asset-panel-padding-left: 0.75rem;
  --permission-type-selector-corner-radius: calc(
    var(--default-corner-radius) + 0.25rem
  );
  --permission-type-selector-padding: 0.25rem;
  --permission-type-button-padding: 0.25rem;
  /* The horizontal gap between elements in a permission type button. */
  --permission-type-button-gap: 0.5rem;
  --permission-type-width: 3.25rem;
  --permission-type-padding-y: 0.125rem;

  /*************\
  |* User menu *|
  \*************/

  /* The vertical gap between each group in the user menu. */
  --user-menu-transition-duration: 200ms;
  --user-menu-gap: 0.75rem;

  /*************************\
  |* Right hand side panel *|
  \*************************/

  --side-panel-transition-duration: 500ms;
  --side-panel-width: 30rem;
  /* The gap between sections in the side panel. */
  --side-panel-gap: 0.25rem;
  --side-panel-heading-height: 1.75rem;
  --side-panel-heading-padding-y: 0.0625px;
  /* The vertical gap between a heading and its content in the side panel. */
  --side-panel-section-gap: 0.5rem;
  --side-panel-label-width: 8rem;
  --side-panel-description-padding-y: 0.25rem;

  --extended-editor-menu-size: 48px;

  --menu-entry-padding: 0.25rem;

  --radio-button-size: 1rem;
  --radio-button-dot-size: 0.5rem;
  --radio-button-dot-padding: calc(
    var(--radio-button-size) / 2 - var(--radio-button-dot-size) / 2
  );

  /***********\
  |* Indents *|
  \***********/

  --indent-size: 1.5rem;
  --indent-1-size: calc(var(--indent-size) * 1);
  --indent-2-size: calc(var(--indent-size) * 2);
  --indent-3-size: calc(var(--indent-size) * 3);
  --indent-4-size: calc(var(--indent-size) * 4);
  --indent-5-size: calc(var(--indent-size) * 5);
  --indent-6-size: calc(var(--indent-size) * 6);
  --indent-7-size: calc(var(--indent-size) * 7);
  --indent-8-size: calc(var(--indent-size) * 8);
  --indent-9-size: calc(var(--indent-size) * 9);
  --indent-10-size: calc(var(--indent-size) * 10);

  /**********\
  |* Modals *|
  \**********/

  /* The vertical gap between inputs in a modal. */
  --modal-gap: 0.5rem;
  /* The padding around the entire modal. */
  --modal-padding: 0.5rem;
  /* Alternative, wider padding around the entire modal. */
  --modal-wide-padding: 1rem;
  --modal-label-width: 3rem;

  --manage-labels-modal-width: 15rem;
  --confirm-delete-modal-width: 24rem;
  --confirm-delete-user-modal-width: 24rem;
  --duplicate-assets-modal-width: 24rem;
  --capture-keyboard-shortcut-modal-width: 24rem;
  --new-label-modal-width: 20rem;
  --invite-users-modal-width: 28.8125rem;
  --manage-permissions-modal-width: 28.8125rem;
  --upsert-data-link-modal-width: 24rem;
  --upsert-data-link-modal-max-width: min(40rem, 100vw);
  --upsert-secret-modal-width: 24rem;

  --modal-tab-bar-padding-x: 0.5rem;
  --modal-tabs-gap: 0.75rem;
  --manage-permissions-modal-input-padding: 0.25rem;
  --modal-invite-button-text-padding-y: 0.125rem;
  --manage-permissions-modal-permissions-list-height: 20rem;

  /******************\
  |* Settings pages *|
  \******************/

  /* The horizontal gap between the settings sidebar and main content. */
  --settings-gap: 2rem;
  /* The gap between the label and value of a settings entry. */
  --settings-entry-gap: 1.25rem;
  --settings-sidebar-width: 12.875rem;
  /* The width of the main section of the settings page, if there are multiple sections stacked
   * horizontally. */
  --settings-main-section-width: 32rem;
  --user-account-settings-label-width: 3rem;
  --change-password-settings-label-width: 9rem;
  --organization-settings-label-width: 10rem;
  --delete-user-account-button-padding-x: 0.5rem;

  --members-name-column-width: 12rem;
  --members-email-column-width: 12rem;

  /***********************\
  |* Authentication flow *|
  \***********************/

  /* The vertical gap between elements in an auth form. */
  --auth-gap: 1.5rem;
  /* The padding around the entire auth form. */
  --auth-padding: 2rem;
  /* The corner radius of the entire auth form. */
  --auth-corner-radius: 2rem;
  /* The font size of the top-level heading (the page title) of an auth page. */
  --auth-heading-font-size: 19px;
  /* The transition duration for all transitions in the auth flow.
   * Currently the only transitions are of the bagkround color of buttons
   * and inputs when they are hovered over or focused. */
  --auth-transition-duration: 300ms;
  /* The gap between the icon and text of an auth link. */
  --auth-link-gap: 0.5rem;
  --auth-input-padding-right: 1rem;
  /* The vertical padding of all inputs and buttons in the auth flow. */
  --auth-input-padding-y: 0.5rem;
  --auth-icon-container-width: 2.5rem;
  --font-awesome-icon-padding-x: 0.75rem;

  /*************\
  |* Home page *|
  \*************/

  /* The gap between each section in the home page. */
  --home-gap: 3rem;
  /* The padding at the very bottom of the entire home page. */
  --home-page-padding-b: 0.25rem;
  /* The horizontal padding for each section of the home page. */
  --home-section-padding-x: 1.1875rem;
  /* The horizontal and vertical gap between adjacent news item tiles. */
  --news-items-gap: 0.75rem;
  --news-items-column-width: 18.75rem;
  --news-item-height: 11.25rem;
  --news-item-description-padding: 1rem;
  --news-item-subtitle-padding-y: 0.125rem;
  /* The horizontal and vertical gap between adjacent sample tiles. */
  --samples-gap: 0.75rem;
  --samples-column-width: 18.75rem;
  /* The vertical gap between a sample's tile and its info. */
  --sample-gap: 0.375rem;
  /* The height of the tile containing the sample's image and description.
   * Does not include the height of its info bar. */
  --sample-height: 11.25rem;
  --sample-description-padding-x: 1rem;
  --sample-description-padding-top: 0.4375rem;
  --sample-description-padding-bottom: 0.875rem;
  --sample-image-height: 6.25rem;
  /* The height of the sample's info bar. */
  --sample-info-height: 1.125rem;

  /**************\
  |* Drive page *|
  \**************/

  --drive-name-column-width: 15.3125rem;
  --drive-modified-column-width: 8.3125rem;
  --drive-shared-with-column-width: 10rem;
  --drive-labels-column-width: 20rem;
  --drive-accessed-by-projects-column-width: 24rem;
  --drive-accessed-data-column-width: 24rem;
  --name-column-padding-x: 0.375rem;
  --name-column-padding-y: 0.125rem;
  --name-column-icon-margin: 0.25rem;
  --name-column-icon-gap: 0.25rem;

  /*********************\
  |* Left hand sidebar *|
  \*********************/

  /* The vertical padding for the entire sidebar. */
  --drive-sidebar-padding-y: 0.25rem;
  /* The gap between the individual panels in the sidebar. */
  --drive-sidebar-gap: 1rem;
  --drive-sidebar-width: 7.5rem;
  --sidebar-section-heading-padding-x: 0.5rem;
  /* Only used for the settings sidebar, not the drive sidebar. */
  --sidebar-section-heading-padding-y: 0.125rem;
  /* The vertical gap between the section heading and its content. */
  --sidebar-section-heading-margin-b: 0.375rem;

  /* Toast colors. */
  --toastify-color-light: var(--color-background);
  --toastify-icon-color-success: var(--color-accent);
  --toastify-icon-color-error: var(--color-danger);
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    scrollbar-width: none;
  }
}

/* These styles MUST still be copied
 * as `.enso-app body` and `.enso-app html` make no sense. */
:where(.enso-app, .enso-portal-root) {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  --font-family: "Enso Prose", "Enso", "M PLUS 1", "Roboto Light", sans-serif;
  font-family: var(--font-family);
  --toastify-font-family: var(--font-family);
  font-feature-settings: normal;

  @apply font-medium;

  textarea {
    background: unset;
  }

  kbd {
    font-family: "Enso Prose", "Enso", "M PLUS 1", "Roboto Light", sans-serif;
  }

  :focus {
    outline: none;
  }

  [popover] {
    inset: unset;
    margin: unset;
    width: unset;
    height: unset;
    overflow: unset;
  }
}

:where(.enso-portal-root) {
  @apply contents;
}

/* Must be kept in sync with app/gui/view/graph-editor/src/builtin/visualization/java_script/helpers/scrollable.js. */

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
}

::-webkit-scrollbar:vertical {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  @apply w-2 rounded-full border-2 border-solid border-transparent;

  background-repeat: no-repeat, no-repeat, no-repeat;
}

::-webkit-scrollbar-thumb:vertical {
  background-position: bottom, top, center;
  background-size:
    contain,
    contain,
    100% calc(100% - 2 * 8px);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 10 100" preserveAspectRatio="none"><rect x="0" y="0" width="10" height="100" /></svg>');
  border-top-width: var(--scrollbar-offset-edge, 4px);
  border-bottom-width: var(--scrollbar-offset-edge, 4px);
  border-right-width: 4px;
  border-left-width: 0;

  &:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25)" fill="currentColor" viewBox="0 0 10 100" preserveAspectRatio="none"><rect x="0" y="0" width="10" height="100" /></svg>');
  }

  &:active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2)" fill="currentColor" viewBox="0 0 10 100" preserveAspectRatio="none"><rect x="0" y="0" width="10" height="100" /></svg>');
  }
}
::-webkit-scrollbar-thumb:horizontal {
  background-position: left, right, center;
  background-size:
    contain,
    contain,
    calc(100% - 2 * 8px) 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 100 10" preserveAspectRatio="none"><rect x="0" y="0" width="100" height="10" /></svg>');
  border-left-width: var(--scrollbar-offset-edge, 4px);
  border-right-width: var(--scrollbar-offset-edge, 4px);
  border-top-width: 0;
  border-bottom-width: 4px;

  &:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.25)" fill="currentColor" viewBox="0 0 100 10" preserveAspectRatio="none"><rect x="0" y="0" width="100" height="10" /></svg>');
  }

  &:active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.2)" fill="currentColor" viewBox="0 0 100 10" preserveAspectRatio="none"><rect x="0" y="0" width="100" height="10" /></svg>');
  }
}

::-webkit-scrollbar-corner {
  background: rgb(0 0 0 / 0%);
}

body[data-debug] {
  :focus {
    outline: 2px solid rgb(0 0 255 / 60%);
    outline-offset: -1px;
  }

  :focus-visible {
    outline: 2px solid rgb(0 128 0 / 60%);
    outline-offset: -1px;
  }
}

:root::highlight(field-wrong-email) {
  @apply text-danger;
}
:root::highlight(field-existing-email) {
  @apply text-amber-500;
}

/* Disable all animations. */
html.disable-animations * {
  transition: none !important;
  animation: none !important;
  animation-play-state: paused !important;
}

.Toastify__toast {
  @apply rounded-2xl;
}
