:root {
  --azul-sv: #1618ff;
  --laranja-boopt: #ff7730;
  --navbar-width: 16rem;
  --burger-header-height: 4rem;
  --fonte:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif,
    system-ui;
  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.15'%3E%3C/rect%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth !important;
}

.grid.grid-dividers > *:not(:last-child) {
  border-bottom: 1px solid var(--color-base-200);
  padding-bottom: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
}

.input,
.select,
.file-input,
.choices,
.textarea {
  transition: border-color 100ms;

  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none !important;
    border-color: var(--color-primary);
  }
}

.textarea:disabled,
.select:disabled,
.input:disabled,
.input:has(> input:disabled) {
  border-color: var(--input-color) !important;
}

.modal-box,
.modal-backdrop {
  transition:
    opacity 200ms,
    scale 200ms !important;
}

.modal {
  transition:
    visibility 0.3s allow-discrete,
    background-color 0.3s ease-out,
    opacity 0.1s ease-out;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeFromRight {
  from {
    right: -100%;
  }

  to {
    right: 0%;
  }
}

.radio-group {
  display: grid;
  grid-auto-flow: column;
  gap: 0.25rem;
  background: var(--color-base-200);
  padding: 0.3rem;
  border-radius: var(--radius-field);
  height: min-content;

  input[type="radio"] {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    appearance: none;
    width: 100%;
    text-align: center;
    height: max-content;
    border-radius: var(--radius-field);
    background: transparent;
    transition: background 100ms;

    &::after {
      content: attr(value);
      font-weight: 500;
    }

    &:nth-of-type(1) {
      display: none;
    }

    &:checked {
      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
      background: var(--color-primary);
      color: var(--color-primary-content);

      &[value="Sim"] {
        background: var(--color-success);
        color: var(--color-success-content);
      }

      &[value="Não"] {
        background: var(--color-error);
        color: var(--color-error-content);
      }
    }
  }
}

.animacao-frase-vem {
  position: relative;
  animation: fraseVem 300ms ease-out backwards;
}

.animacao-frase-vai {
  position: relative;
  animation: fraseVai 300ms ease-in forwards;
}

@keyframes fraseVem {
  from {
    left: 100%;
  }

  to {
    left: 0%;
  }
}

@keyframes fraseVai {
  from {
    left: 0%;
  }

  to {
    left: -100%;
  }
}

/* safari */
.list-row::after {
  border-color: color-mix(
    in oklab,
    var(--color-base-content) 5%,
    transparent
  ) !important;
}

label.input > input[type="date"] {
  line-height: var(--size);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}

/* edge */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* print */
@media print {
  #navbar {
    display: none;
  }

  #burger-header {
    position: sticky;
    background: #fff !important;
    top: 0;
  }

  #app,
  html,
  body {
    background-color: #fff;
  }
}