.fizz-input-text,
.fizz-input-search,
.fizz-input-search-subdued,
.fizz-textarea {
  border-radius: $border-radius-medium;
  border: $border-width-thin solid $color-border-input;
  font-size: $text-large-font-size;
  line-height: $text-medium-line-height;
  padding: $spacing-8 $spacing-16;
  margin: 0;
  color: $color-text-body;
  max-width: 100%;
  background-color: $color-background-surface;

  &::placeholder,
  &::-ms-input-placeholder {
    color: $color-text-subdued;
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-input-text,
  .fizz-input-search,
  .fizz-input-search-subdued,
  .fizz-textarea {
    font-size: $text-medium-font-size;
  }
}

.fizz-textarea {
  max-width: 100%;
  resize: vertical;
  padding: $spacing-8 $spacing-16;
}

.fizz-select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  max-width: 100%;
  border-radius: $border-radius-medium;
  border: $border-width-thin solid $color-border-input;
  color: $color-text-body;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  padding: $spacing-8 calc(#{$spacing-32} + #{$spacing-8}) $spacing-8 $spacing-16;
  background-image: $icon-chevron-down;
  background-repeat: no-repeat;
  background-position: top 50% right $spacing-16;
  background-size: $spacing-16 $spacing-16;
  background-color: $color-background-surface;
}

.fizz-select option {
  padding: 0;
}

.fizz-checkbox,
.fizz-radio-button {
  width: $icon-size-small;
  height: $icon-size-small;
  border: $border-width-thin solid $color-border-input;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.fizz-checkbox {
  border-radius: $border-radius-medium;
}

.fizz-radio-button {
  position: relative;
  border-radius: 50%;
}

.fizz-checkbox-large {
  width: $icon-size-medium;
  height: $icon-size-medium;
  border: $border-width-thin solid $color-border-input;
  border-radius: $border-radius-round;
  -webkit-appearance: none;
  appearance: none;
}

.fizz-checkbox:checked,
.fizz-checkbox-large:checked {
  background-color: $color-background-brand-secondary;
  border-color: $color-border-brand-secondary;
  background-image: $icon-checkmark-white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.fizz-radio-button:checked {
  background-color: $color-background-brand-secondary;
  border-color: $color-border-brand-secondary;
}

.fizz-radio-button:checked:after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  border-radius: 50%;
  background-color: $color-white;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.fizz-checkbox:focus-visible,
.fizz-checkbox:hover,
.fizz-checkbox-large:focus-visible,
.fizz-checkbox-large:hover,
.fizz-radio-button:focus-visible,
.fizz-radio-button:hover {
  outline: none;
  border-color: $color-border-brand-secondary;
  background-color: $color-background-brand-secondary-subdued;
}

.fizz-checkbox:checked:hover,
.fizz-checkbox:checked:focus-visible,
.fizz-checkbox-large:checked:hover,
.fizz-checkbox-large:checked:focus-visible,
.fizz-radio-button:checked:hover, 
.fizz-radio-button:checked:focus-visible {
  background-color: $color-teal-800;
  border-color: $color-teal-800;
}

.fizz-checkbox:disabled,
.fizz-checkbox-large:disabled,
.fizz-radio-button:disabled {
  background-color: $color-gray-100;
  border-color: $color-border-input;
}

.fizz-checkbox:disabled:checked,
.fizz-checkbox-large:disabled:checked,
.fizz-radio-button:disabled:checked {
  background-color: $color-background-interactive-inactive;
  border-color: transparent;
}

.fizz-input-text:focus,
.fizz-input-search:focus,
.fizz-input-search-subdued:focus,
.fizz-select:focus,
.fizz-textarea:focus {
  outline: none;
  border-color: $color-border-brand-secondary;
  box-shadow: $box-shadow-input-focus;
}

.fizz-input-text:active:not(:disabled),
.fizz-input-search:active:not(:disabled),
.fizz-input-search-subdued:active:not(:disabled),
.fizz-select:active:not(:disabled),
.fizz-textarea:active:not(:disabled),
.fizz-input-text:hover:not(:disabled),
.fizz-input-search:hover:not(:disabled),
.fizz-input-search-subdued:hover:not(:disabled),
.fizz-select:hover:not(:disabled),
.fizz-textarea:hover:not(:disabled) {
  border-color: $color-border-brand-secondary;
}

.fizz-input-text:disabled,
.fizz-input-search:disabled,
.fizz-input-search-subdued:disabled,
.fizz-select:disabled,
.fizz-textarea:disabled {
  background-color: $color-gray-100;
}

.fizz-label {
  display: block;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  font-weight: $font-weight-semibold;
}

.fizz-file-upload {
  border: 1px dashed $color-border-input;
  display: grid;
  place-items: center center;
  padding: $spacing-24;
  position: relative;
}

.fizz-file-upload > span {
  background-image: $icon-upload;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: $icon-size-small $icon-size-small;
  padding-top: $spacing-16;
}

.fizz-file-upload [type="file"] {
  display: none;
}

.fizz-file-upload.fizz-is-disabled {
  border-style: solid;
  margin-bottom: calc(#{$spacing-32} + #{$spacing-4});
}

.fizz-file-upload.fizz-is-disabled [type="file"] + span {
  display: none;
}

.fizz-file-upload.fizz-is-disabled .fizz-progress {
  position: absolute;
  width: calc(100% - #{$spacing-32});
  top: $spacing-24;
  left: $spacing-16;
}

.fizz-file-upload.fizz-is-disabled + p {
  display: none;
}

.fizz-progress + p {
  padding-top: $spacing-16;
  font-weight: $font-weight-semibold;
  color: $color-text-subdued;
  text-align: center;
}

.fizz-input-search,
.fizz-input-search-subdued {
  background-image: $icon-search;
  background-repeat: no-repeat;
  background-size: $icon-size-small $icon-size-small;
  background-position: top 50% left $spacing-12;
  padding-left: calc(#{$spacing-32} + #{$spacing-4});
}

.fizz-input-small {
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  padding: $spacing-4 $spacing-8;
}

.fizz-input-large {
  padding-top: $spacing-12;
  padding-bottom: $spacing-12;
}

.fizz-select.fizz-input-small {
  padding: $spacing-4 $spacing-24 $spacing-4 $spacing-8;
  background-position: top 50% right $spacing-8;
}

.fizz-input-error,
.fizz-bordered.fizz-input-error,
input:invalid,
input.dirty.invalid {
  border-color: $color-border-error;
}

.fizz-input-with-button {
  padding: 0;
  overflow: hidden;
  &:focus-within {
    border-color: $color-background-brand-secondary;
    box-shadow: $box-shadow-input-focus;
  }
  input {
    border: 0;
    padding: $spacing-8 $spacing-32 $spacing-8 $spacing-16;
    margin: 0;
    width: calc(100% - #{$spacing-32 + $spacing-8});
    &:focus{
      outline: none;
    }
  }
  + button {
    position: absolute;
    top: $spacing-4;
    right: $spacing-4;
  }
}

.fizz-input-search-subdued {
  border-color: transparent;
  background-color: $color-background-highlight;
  background-position: top 50% right $spacing-12;
  padding-right: calc(#{$spacing-32} + #{$spacing-16});
  padding-left: $spacing-16;
}

.fizz-input-search-subdued:focus {
  background-color: white;
}

@media (min-width: $breakpoint-m) {
  .fizz-input-search-subdued {
      background-size: 20px;
  }
}