@import "design-tokens.css";

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.material-symbols-outlined.fill-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

.component-stage {
  background-image: radial-gradient(var(--color-surface-container-highest) 1px, transparent 1px);
  background-size: 20px 20px;
}

.fade-in {
  animation: rateioexato-fade-in 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes rateioexato-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.form-input-focus:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 74, 198, 0.2);
}

.bg-login-panel {
  background-color: var(--color-primary-container);
  background-size: cover;
  background-position: center;
}

[data-rex-dropdown].is-open > [data-rex-dropdown-menu] {
  display: block;
}

[data-rex-modal].is-open {
  display: flex;
}

[data-rex-modal].is-open [data-rex-modal-panel] {
  transform: scale(1);
}

[data-rex-toast].is-visible {
  transform: translateX(0);
}

.rex-field-error {
  display: none;
  margin-top: 4px;
  color: var(--color-error, #ba1a1a);
}

.rex-field-error--visible {
  display: block;
}

input.rex-input-error,
input.rex-input-error:focus {
  border-color: var(--color-error, #ba1a1a) !important;
}