components/sass/form/_index.scss

form {
  // setting the font size here sizes everything within
  &:not(:last-child) {
    margin-bottom: var(--spacing-s);
  }
}

input,
select {
  height: var(--spacing-l);
  border: 1px solid;
}

checkbox-element,
radio-element,
select {
  cursor: pointer;
}

[type="email"],
[type="number"],
[type="password"],
[type="text"] {
  padding-right: var(--spacing-s);
  padding-left: var(--spacing-s);
  transition: border 0.2s;
}

[type="submit"] {
  color: var(--lbry-white);
  padding-right: var(--spacing-m);
  padding-left: var(--spacing-m);
  transition: all 0.2s;

  &:not(:hover) {
    background-color: var(--lbry-black);
    border-color: var(--lbry-black);
  }

  &:hover {
    background-color: var(--lbry-teal-3);
    border-color: var(--lbry-teal-5);
  }
}

select {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
  background-position: 99% center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: var(--spacing-l);
  padding-left: var(--spacing-s);

  [data-mode="dark"] & {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
  }
}

fieldset {
  border-top: 1px solid var(--lbry-gray-1);
  margin-bottom: var(--spacing-m);
  position: relative;
}

fieldset-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

fieldset-section {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-m);

  &.full-width {
    width: 100%;
  }

  fieldset-group &,
  .fieldset-group & {
    width: 49%;
  }

  label {
    color: var(--lbry-gray-4);
    display: inline-block;
    font-size: smaller;
    margin-bottom: var(--spacing-xxs);
    text-transform: uppercase;
  }

  [type="email"],
  [type="number"],
  [type="text"],
  select,
  textarea {
    border-color: var(--lbry-black);

    &:focus {
      border-color: var(--lbry-teal-5);
    }
  }

  input,
  select {
    width: 100%;
  }
}

legend {
  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
  border: 1px solid var(--lbry-gray-1);
  margin-bottom: var(--spacing-s);
  pointer-events: none;
}

input-submit {
  display: flex;

  [type="email"],
  [type="text"] {
    flex: 1;

    &:not(:focus) {
      border-top-color: var(--lbry-black);
      border-right-color: transparent;
      border-bottom-color: var(--lbry-black);
      border-left-color: var(--lbry-black);
    }

    &:focus {
      border-top-color: var(--lbry-teal-5);
      border-right-color: transparent;
      border-bottom-color: var(--lbry-teal-5);
      border-left-color: var(--lbry-teal-5);
    }
  }
}

checkbox-element {
  @include tick;

  &:hover {
    checkbox-toggle,
    .checkbox-toggle {
      border-color: var(--lbry-teal-4);
    }
  }

  input {
    &[type="checkbox"] {
      width: 0; height: 0;
      visibility: hidden;

      &:not(:checked) {
        + label + checkbox-toggle::before,
        + label + .checkbox-toggle::before {
          opacity: 0;
          visibility: hidden;
        }
      }

      &:checked {
        + label {
          color: var(--lbry-teal-4);
        }
      }
    }
  }
}

checkbox-toggle {
  @include tick-toggle;

  &::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 130%;
    transition: all 0.2s;
  }
}

radio-element {
  @include tick;

  &:hover {
    radio-toggle,
    .radio-toggle {
      border-color: var(--lbry-teal-4);
    }
  }

  input {
    &[type="radio"] {
      width: 0; height: 0;
      visibility: hidden;

      &:not(:checked) {
        + label + radio-toggle::before,
        + label + .radio-toggle::before {
          background-color: transparent;
        }
      }

      &:checked {
        + label {
          color: var(--lbry-teal-4);
        }

        + label + radio-toggle::before,
        + label + .radio-toggle::before {
          background-color: var(--lbry-teal-4);
        }
      }
    }
  }
}

radio-toggle {
  @include tick-toggle;
  border-radius: 50%;

  &::before {
    border-radius: 50%;
    transform: scale(0.6);
    transition: background-color 0.2s;
  }
}

// Custom elements are apparently difficult to use in React, so use classes

.checkbox-element {
  @extend checkbox-element;
}

.checkbox-toggle {
  @extend checkbox-toggle;
}

.fieldset {
  @extend fieldset;
}

.fieldset-group {
  @extend fieldset-group;
}

.fieldset-section {
  @extend fieldset-section;
}

.form {
  @extend form;
}

.input-submit {
  @extend input-submit;
}

.radio-element {
  @extend radio-element;
}

.radio-toggle {
  @extend radio-toggle;
}