/* PIPE Forms CSS */

[form-element] {
  --form-color: var(--color-elevated);
  --form-text: var(--text-main);
  --form-subtle: var(--text-subtle);
  --form-radius: 0.5rem;
  --form-accent: var(--color-brand-1);

  display: block;
  width: 100%;

  [form-hint] {
    color: var(--form-subtle);
  }
}

/* Form Input */
form-input {
  position: relative;
  color: var(--form-text);

  .input-wrapper {
    position: relative;
  }

  input {
    padding: 0.5rem 1rem;
    border-radius: var(--form-radius);
    background-color: var(--form-color);
    border: 2px solid transparent;
    color: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    outline: none;

    &:focus {
      border-color: var(--form-accent);
    }
  }

  [form-label] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    border-radius: 0.25rem;
  }
  &:focus-within [form-label],
  input:not(:placeholder-shown) ~ [form-label] {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8em;
    opacity: 1;
    background-color: var(--form-color);
    padding: 0 0.5em;
    padding-top: 0.3em;
    line-height: 0;
  }
}

/* Form Text Area */
form-textarea, form-textarea[form-element] {
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--form-text);

  textarea {
    padding: 0.5rem 1rem;
    border-radius: var(--form-radius);
    background-color: var(--form-color);
    border: 2px solid transparent;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100% !important;
    min-height: 3em;
    outline: none;
    flex-grow: 1;

    &:focus {
      border-color: var(--form-accent);
    }
  }
  
  .textarea-head:not(:empty) {
    padding: 0 1rem;
    padding-bottom: 0.25rem;
  }
}

/* Form Toggle and Form Checkbox (Boolean) */
form-toggle, form-toggle[form-element],
form-checkbox, form-checkbox[form-element] {
  display: flex;
  position: relative;
  color: var(--form-text);

  .toggle-wrapper, .checkbox-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    background-color: var(--form-color);
    border-radius: var(--form-radius);
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
    user-select: none;

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The Checkbox */
    .checkbox-check {
      position: relative;
      width: 1.6rem;
      height: 1.6rem;
      border: 2px solid rgba(250, 250, 250, 0.2);
      margin-right: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.8em;
      span.icon {
        opacity: 0;
        position: relative;
        left: 0.1rem;
        color: #fff;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* The Track */
    .toggle-track {
      width: 2.5rem;
      height: 1.25rem;
      background-color: rgba(250, 250, 250, 0.2);
      border-radius: 1rem;
      position: relative;
      margin-left: auto; /* Pushes track to the right side of the element */
      transition: background-color 0.2s ease;

      /* The Knob */
      &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(1.25rem - 4px);
        height: calc(1.25rem - 4px);
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  }

  /* Focus & Checked States */
  .checkbox-wrapper:has(input:focus-visible),
  .toggle-wrapper:has(input:focus-visible) {
    border-color: var(--form-accent);
  }

  input:checked ~ .toggle-track {
    background-color: var(--form-accent);
    &::after {
      transform: translateX(1.25rem);
    }
  }
  input:disabled ~ .toggle-track,
  input:disabled ~ .checkbox-check {
    opacity: 0.5;
    cursor: not-allowed;
  }

  input:checked ~ .checkbox-check {
    background-color: var(--form-accent);
    span.icon {
      opacity: 1;
    }
  }

  .label-wrapper:not(:empty) {
    margin-right: 1rem;
  }
}

/* Form Tri-State Toggle */
form-tristate, form-tristate[form-element] {
  display: flex;
  position: relative;
  color: var(--form-text);

  .tristate-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    background-color: var(--form-color);
    border-radius: var(--form-radius);
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
    user-select: none;

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
  }

  /* Focus styling mapped to keyboard element interactions */
  .tristate-wrapper:has(input:focus-visible) {
    border-color: var(--form-accent);
  }

  .label-wrapper:not(:empty) {
    margin-right: 1rem;
  }

  /* The Shared Track Box */
  .tristate-track {
    width: 4rem;
    height: 1.5rem;
    background-color: rgba(250, 250, 250, 0.15);
    border-radius: 1rem;
    position: relative;
    margin-left: auto;
    cursor: pointer;

    /* The Moving Center Slider Knob */
    .tristate-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(1.5rem - 4px);
      height: calc(1.5rem - 4px);
      border-radius: 50%;
      pointer-events: none;
      transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s ease;
      display: flex;
      justify-content: center;
      align-items: center;

      i.fa {
        display: none;
        opacity: 1;
        color: #fff;
        transition: opacity 0.25s ease-in-out;
      }
    }
  }

  /* Dynamic Layout Shifts driven by Class attributes */
  &[value="false"] .tristate-track {
    .tristate-knob {
      transform: translateX(0);
      background-color: #ef4444;
      i.fa.false-icon {
        opacity: 1;
        display: inline;
      }
    }
  }

  &[value="null"] .tristate-track {
    .tristate-knob {
      transform: translateX(1.25rem);
      background-color: #f5f5f5;
    }
  }

  &[value="true"] .tristate-track {
    .tristate-knob {
      transform: translateX(2.5rem);
      background-color: #22c55e;
      i.fa.true-icon {
        opacity: 1;
        display: inline;
      }
    }
  }

  &[disabled] .tristate-track {
    .tristate-knob {
      opacity: 0.5;
    }
  }
}

/* Rich Text */