/* Text inputs */
.input,
.form-input,
.form-select,
.form-textarea {
  accent-color: var(--input-accent-color, var(--color-text));
  background-color: var(--input-background, transparent);
  border-radius: var(--input-border-radius, 0.5em);
  border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-border));
  color: var(--input-color, var(--color-text));
  font-size: max(16px, 1em);
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--input-padding, 0.75rem 1rem);
  resize: none;
}

.input-currency {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  > input {
    width: calc(100% - 2rem);
  }
}

/* Safari-specific fixes for select elements */
.form-select {
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
  line-height: 1.5;
  box-sizing: border-box;

  &.form-textarea {
    resize: vertical;
  }

  &[type="search"] {
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
  }

  &:autofill,
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-secondary-bg) inset;
  }

  &:where(:not(:active)):focus {
    --input-border-color: var(--color-primary);
    --hover-color: var(--color-primary);
    --outline-size: 0;

    filter: var(--hover-filter);
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }
}

/* Switches */
.switch {
  block-size: 1.75em;
  display: inline-flex;
  inline-size: 3em;
  position: relative;
  border-radius: 2em;

  @media (any-hover: hover) {
    &:where(:not(:active):hover) .switch__btn {
      filter: brightness(0.7);
      box-shadow: none;
    }
  }
}

.switch__input {
  block-size: 0;
  inline-size: 0;
  opacity: 0.1;
}

.switch__btn {
  background-color: #d1d5db;
  border-radius: 2em;
  cursor: pointer;
  inset: 0;
  position: absolute;
  transition: 150ms ease;

  &::before {
    background-color: #ffffff;
    block-size: 1.35em;
    border-radius: 50%;
    content: "";
    inline-size: 1.35em;
    inset-block-end: 0.2em;
    inset-inline-start: 0.2em;
    position: absolute;
    transition: 150ms ease;
  }

  .switch__input:disabled + & {
    background-color: #d1d5db !important;
    cursor: not-allowed;
  }

  .switch__input:checked + & {
    background-color: #6366f1;

    &::before {
      transform: translateX(1.2em);
    }
  }
}

/* Form layouts */
.form-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.form-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (width < 640px) {
  .form-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

.form-grid-full {
  grid-column: 1 / -1;
}

.field--short-120 {
  max-inline-size: 120px;
}

.field--short-200 {
  max-inline-size: 200px;
}

.switch-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.switch-label {
  cursor: pointer;
  user-select: none;
}