@mixin label {
  display: block;
  width: 100%;
}

@mixin input {
  display: block;
  color: $color-gray-700;
  font-size: $text-base;
  font-family: inherit;
  line-height: $leading-normal;
  background-color: $color-gray-200;
  border-radius: $rounded;
  padding: $spacing-3;
  margin: $spacing-0;
  width: 100%;
  appearance: none;
  resize: vertical;

  &:disabled {
    opacity: $opacity-50;
    cursor: not-allowed;
  }
}

@mixin input--color($border-color: $color-gray-200) {
  border: $border-1 solid $border-color;
}

@mixin input--select {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%234a5568" d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>');
  background-position: center right $spacing-3;
  background-repeat: no-repeat;
  background-size: $text-sm;
  padding-right: $spacing-9;
}

@mixin option {
  display: inline-flex;
  font-size: $text-base;
  align-items: center;

  .c-option__indicator {
    display: inline-block;
    background-color: $color-gray-300;
    @include option--color;
    border-radius: $rounded-sm;
    width: 1em;
    height: 1em;
  }

  .c-option__label {
    margin-left: $spacing-3;
    user-select: none;
  }
}

@mixin option--color($border-color: $color-gray-300) {
  .c-option__indicator {
    border: $border-1 solid $border-color;
  }
}

@mixin option--check {
  input[type="checkbox"] {
    @include visually-hidden;

    &:checked + .c-option__indicator {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%234a5568" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 0.75em;
    }

    &:disabled + .c-option__indicator,
    &:disabled ~ .c-option__label {
      opacity: $opacity-50;
      cursor: not-allowed;
    }
  }
}

@mixin option--radio {
  input[type="radio"] {
    @include visually-hidden;

    &:checked + .c-option__indicator {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%234a5568" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 0.75em;
    }

    &:disabled + .c-option__indicator,
    &:disabled ~ .c-option__label {
      opacity: $opacity-50;
      cursor: not-allowed;
    }
  }

  .c-option__indicator {
    border-radius: $rounded-full;
  }
}

.c-label {
  @include label;
}

.c-input {
  @include input;
  @include input--color;

  &--error {
    @include input--color($border-color: $color-red-500);
  }

  &--success {
    @include input--color($border-color: $color-green-500);
  }

  &--select:not([multiple]) {
    @include input--select;
  }
}

.c-option {
  @include option;

  &--check {
    @include option--check;
  }

  &--radio {
    @include option--radio;
  }

  &--error {
    @include option--color($border-color: $color-red-500);
  }

  &--success {
    @include option--color($border-color: $color-green-500);
  }
}