form {
  margin: 0;
}

.radio, .checkbox {
  $size: 1.3rem;
  $margin: 0.5rem;

  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: $size + $margin;

  input {
    visibility: hidden;
    position: absolute;
  }

  label {
    &::before {
      @include usevar('color', 'fg-font-color');
      @include usevar('background-color', 'form-check-background');
      @include usevar('border-color', 'form-check-border-color');

      position: absolute;
      left: 0;

      display: flex;
      justify-content: center;
      align-items: center;

      border-width: 1px;
      border-style: solid;

      content: "";

      width: $size;
      height: $size;

      transition: border-color 0.2s;

      &:hover {
        @include usevar('border-color', 'form-check-border-color-hover');
      }
    }
  }

  input:disabled ~ * {
    opacity: 0.5;
  }
}

.radio {
  label:before {
    border-radius:50px;
  }

  input:checked + label:before {
    content:"\25cf";
  }
}

.checkbox {
  label:before {
    border-radius:0.1cm;
  }

  input:checked + label:before {
    content:"\2713";
  }
}

input[type=text],
input[type=password],
input[type=email],
textarea,
select,
{
  @include usevar('color', 'fg-font-color');
  @include usevar('background-color', 'form-text-background');
  @include usevar('border-color', 'form-text-border-color');

  border-width: 1px;
  border-radius: 2px;
  transition: border-color 0.3s, background-color 0.3s;
  outline: none;

  &.lite {
    background-color: transparent;
    border-radius: 0;
    border-width: 2px 0 2px;
    border-style: solid;
    border-color: transparent;

    transition: border-bottom-color 60ms ease-in-out;

    &:focus, &:active {
      background-color: transparent;
      border-top-color: transparent; // ugh
      border-bottom-color: var(--input-lite-border);
    }
  }

  &:active, &:focus {
    @include usevar('background-color', 'form-text-background-active');
    @include usevar('border-color', 'form-text-border-color-active');
  }
}

input[type=text],
input[type=password],
input[type=email],
{
  &:not(.lite) {
    padding: $input-padding;
  }
}

textarea {
  padding: $input-padding;
}

form .note {
  font-style:italic;
}

select {
  padding: $input-padding 2*$input-padding;
}

option[selected] {
  font-weight:bold;
}

input, select, textarea {
  &[disabled] {
    opacity: 0.5;
  }
}

#{$buttons} {
  &:not(.button-small) {
    @extend .ph3;
    @extend .pv2;
  }

  &.button-small {
    @extend .ph2;
    @extend .pv1;
  }

  @include usevar('color', 'form-button-color');
  @include usevar('background-color', 'theme-color');
  @include usevar('border-color', 'theme-color');

  border-width: 1px;
  border-style: solid;
  display: inline-block;
  border-radius: 2px;
  transition: background-color 0.1s, border-color 0.1s;
  cursor: pointer;
  font-weight: 600;

  &:hover {
    @include usevar('color', 'form-button-color-active');
    @include usevar('background-color', 'theme-color-light');
    @include usevar('border-color', 'theme-color-light');
  }

  &.lite {
    @include lite-button;
  }

  // UNUSED
  &.inline-button {
    @include usevar('border-color', 'form-button-inline-border-color');

    margin:5px;
    box-shadow:none;
    border-width: 1px;
    border-style: solid;
    padding:5px 7px;
  }
}

// UNUSED
.tabbar {
  height:40px;
  padding-left:50px;
  margin-bottom:20px;

  .tab {
    padding:10px;
    border-bottom:none;

    &.current {
      /* Border color given by theme */
      border-bottom:2px solid transparent;
    }
  }
}

.generic-form {
  width:60%;
  max-width:50em;
  margin:auto;
  margin-top:50px;
  padding:50px;
  border:1px solid transparent;
  border-bottom-width:0px;
  border-top-left-radius:3px;
  border-top-right-radius:3px;

  table {
    border-collapse: separate;
    border-spacing: 4px;
  }

  th {
    padding-right:10px;
    text-align:right;

    &.error {
      color: red;
      text-align:center;
    }
  }
}

#search_form_input_homepage {
  @include usevar('background-color', 'landing-search-background');

  &:hover, &:focus {
    @include usevar('background-color', 'landing-search-background-hover');
  }
}