@import './form.bare.css';

.form {
}

.form-input,
.form-textarea,
.form-select {
  padding: s-space(sm) s-space(sm);
  @s-transition (fast);

  &::placeholder {
    color: s-color(main, placeholder);
  }
}

.form-input,
.form-select {
  border: solid 1px s-color(main, border);
  color: s-color(main, form);
  background: s-color(main, form-background);
  font-size: s-size(form);
  line-height: s-size(form);
  box-shadow: var(--s-shadow-form);
  @s-radius;

  &:focus {
    outline: 1px solid s-color(accent);
  }
}

.form-checkbox {
  /* thumb settings */
  --thumb-size: 1.4em;
  --thumb-color-active: s-color(current);
  --thumb-color-inactive: s-color(current, --alpha 0.5);
  --thumb-color-highlight: s-color(current, --alpha 0.2);
  --thumb-radius: 999px;
  --thumb-transition: s-transition(fast);

  /* track settings */
  --track-size: calc(var(--thumb-size) * 2);
  --track-padding: 0.2em;
  --track-color-active: s-color(current, --alpha 0.1);
  --track-color-inactive: s-color(current, --alpha 0.05);
  --track-radius: 999px;
}

/* look and feel */
.form-checkbox {
  font-size: 0.8rem;
  background: var(--track-color-inactive);
  border: s-color(main, border) solid 1px;
  outline-offset: 5px;
  transition: var(--thumb-transition);
  border-radius: var(--track-radius);

  &:checked {
    &::before {
      background: var(--thumb-color-active) !important;
    }
  }

  &::before {
    --highlight-size: 0;

    background: var(--thumb-color-inactive);
    box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
    transform: translateX(var(--thumb-position));
    transition: var(--thumb-transition);
    border-radius: var(--thumb-radius);
  }

  &::after {
    background: rgba(255, 255, 25, 0);
    box-shadow: 0;
    transition: var(--thumb-transition);
    border-radius: var(--thumb-radius);
  }

  &:not(:disabled):hover::before {
    --highlight-size: 0.5rem;
  }
  &:not(:disabled):focus::before {
    --highlight-size: 0.25rem;
  }

  &:checked {
    background: var(--track-color-active);
  }
}