$input-color: $color-dark-slate-gray;
$input-border-color: $color-light-gray;
$input-icon-color: $color-light-gray;
$input-icon-active-color: $color-gray;
$input-shadow: none;

$input-focus-box-shadow-color: none;
$input-focus-border-color: $color-gray;
$input-hover-border-color: $color-gray;
$input-active-border-color: $color-gray;

$input-disabled-border-color: $color-gray;

// Custom classes not from with bulma
$input-size-small: $size-small;
$input-size-normal: $size-normal;
$input-size-medium:  1.43rem;
$input-size-large: 1.75rem;

@import "bulma/sass/form/_all.sass";

// Form control
@mixin form_control {
  font-family: $family-source-sans-pro;
  font-weight: 600;

  line-height: 1.3;

  border-width: 0.125rem;
}

// Input
.input {
  @include form_control;
  box-sizing: border-box;
  height: 2.5em;
  padding-left: $space-small;

  &.is-medium {
    font-size: 1.43rem;
    height: 3.875rem;
    padding-left: $space-normal;
  }

  &.is-large {
    font-size: 1.75rem;
    height: 5.063rem;
    padding-left: $space-big;
  }
}

// Textarea
.textarea {
  @include form_control;
  box-sizing: border-box;
  min-height: 6.875em;
  resize: both;
}

// Select
.select {
  select {
    @include form_control;

    option {
      font-weight: 400;
    }
  }

  &:not(.is-multiple):not(.is-loading)::after {
    background: linear-gradient(45deg, $color-black 50%, transparent 50%);

    border: none;
    border-radius: 0;
  }
}


// Icon support for bulma form controls
.control {
  box-sizing: border-box;
  clear: both;
  font-size: $input-size-normal;
  position: relative;
  text-align: left;

  // Modifiers
  &.has-icons-left,
  &.has-icons-right {

    .icon {
      align-items: center;
      display: inline-flex;
      justify-content: center;
    }

    .icon .icon {
      color: inherit;
      position: unset;
    }

    .input,
    .select {
      &:focus, &:hover {
        & ~ .icon {
          color: $input-icon-active-color;
        }
      }

      &:disabled {
        & ~ .icon {
          color: $input-disabled-placeholder-color;
        }
      }

      &.is-small ~ .icon {
        font-size: $input-size-small;
        height: 2.5em;
      }

      &.is-medium ~ .icon {
        font-size: $input-size-medium;
        height: 3.875rem;
      }

      &.is-large ~ .icon {
        font-size: $input-size-large;
        height: 5.063rem;
      }
    }

    .icon {
      color: $input-icon-color;
      pointer-events: none;
      position: absolute;
      top: 0;
      z-index: 4;
    }
  }

  &.has-icons-left {
    .icon.is-left {
      left: 0;
    }
  }

  &.has-icons-right {
    .icon.is-right {
      right: 0;
    }
  }
}

.checkbox, .radio {
  display: flex;
  align-items: baseline;
  color: #{$color-dark-slate-gray};
}

// This is overriding Bulma style for horizontal radio elements?
.radio+.radio {
  margin-left: unset;
}
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    margin: 0 0.5rem 0 0;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    --checkmark-color: #fff;

    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border-color, #{$color-light-gray});
    background: var(--background);
    transition: background .3s, border-color .3s, box-shadow .2s;

    &:after {
      content: '';
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform  .3s ease, opacity  .2s;
      opacity: var(--o, 0);
    }
    &:checked {
      --background: #{$color-brighter-blue};
      --border-color: transparent;
      --o: 1;
      &:not(:disabled):hover {
        filter: brightness(120%) saturate(120%);
      }
    }
    &:disabled {
      --background: #{$color-light-gray};
      --border-color: #{$color-gray};
      cursor: not-allowed;
      &:checked {
        --checkmark-color: #{$color-gray};
      }
    }
    &:focus {
      box-shadow: 0 0 0 2px rgba(39, 94, 254, .3);
    }
    &:hover:not(:checked):not(:disabled) {
      --border-color: #{$color-gray};
    }
  }
  input[type='checkbox'] {
    border-radius: 0.2rem;
    &:after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--checkmark-color);
      border-top: 0;
      border-left: 0;
      left: 4px;
      top: 2px;
      transform: rotate(20deg);
    }
    &:checked::after {
      transform: rotate(35deg);
    }
  }
  input[type='radio'] {
    border-radius: 0.5rem;
    &:checked::after {
      background: var(--checkmark-color);
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 0.25rem;
      left: 3px;
      top: 3px;
    }
    &:disabled {
      --checkmark-color: #{$color-gray};
      &+.radio-label {
        color: #{$color-gray};
      }
    }
  }
}