// stylelint-disable selector-no-qualifying-type
// stylelint-disable media-feature-name-no-vendor-prefix
fieldset {
  border: 0;
}

legend,
label {
  display: block;
  font-weight: $font-bold;
}

label {
  margin-bottom: $space-xs;
  cursor: pointer;
}

legend {
  text-align: center;
}

@media screen and (min--moz-device-pixel-ratio: 0) {
  // for firefox
  fieldset {
    position: relative;
    padding-top: 3.2rem;

    > legend {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea,
select {
  width: 100%;
  box-sizing: inherit;
  padding: $space-s $space-m;
  border: 1px solid $color-border;
  background-color: $transparent;
  border-radius: $border-radius;
  box-shadow: none;
  color: $color-font;
  font-family: $font-family;
  font-size: $font-size-s;
  line-height: normal;
  vertical-align: middle;
  @include moder($modes) {
    background-color: mode("colorCardBg");
    border-color: mode("colorBorder");
    color: mode("colorFont");
  }

  &:focus,
  &:hover {
    border-color: $color-border-dark;
    outline: 0;
    @include moder($modes) {
      border-color: mode("colorBorderLight");
    }
  }

  &::placeholder {
    color: $color-input-placeholder;
    @include moder($modes) {
      color: mode("colorInputPlaceholder");
    }
  }

  &:disabled {
    background-color: $color-input-disabled;
    cursor: not-allowed;
    @include moder($modes) {
      background-color: mode("colorInputDisabled");
      border-color: mode("transparentColor");
    }

    &:hover,
    &:focus {
      border: 1px solid $color-border;
      @include moder($modes) {
        border-color: mode("transparentColor");
      }
    }
  }
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"] {
  height: 4.1rem;
  appearance: none;
}

select {
  height: 4.1rem;
  border-radius: $border-radius;
  cursor: pointer;
}

input[type="search"] {
  padding-left: $content-padding-inline + $space-m;
}

.gra-search-input {
  position: relative;

  input[type="search"] {
    padding-left: $content-padding-inline + $space-m;
  }

  &::before {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: $space-m;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -8px;
    padding-left: $space-m;
    background-image: url($search-icon);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
  }
}

.gra-form-group {
  margin-bottom: $space-l;
}

.gra-form-actions {
  .gra-btn:not(:first-child) {
    margin-left: $space-xs;
  }
}

.gra-custom-form-control {
  display: block;
  position: relative;
  margin-bottom: $space;
  padding-left: calc(1.6rem + #{$space-s});

  .gra-custom-form-input {
    position: absolute;
    left: -9999px;
    opacity: 0;

    &:focus ~ .gra-custom-form-label::before {
      box-shadow: $el-box-shadow;
    }
  }

  .gra-custom-form-input:disabled ~ .gra-custom-form-label,
  .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label {
    color: $color-mute;
    cursor: not-allowed;
    @include moder($modes) {
      color: mode("colorMute");
    }

    &::before {
      background: $color-mute;
      border-color: $color-mute;
      @include moder($modes) {
        background-color: mode("colorMute");
        border-color: mode("colorMute");
      }
    }
  }

  .gra-custom-form-label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: $font-normal;

    &::before,
    &::after {
      display: block;
      position: absolute;
      content: "";
    }

    &::before {
      top: 3px;
      left: 0;
      width: 1.6rem;
      height: 1.6rem;
      border: 1px solid $color-border-dark;
      border-radius: 1px;
      pointer-events: all;
      transition: $transition-default;
      user-select: none;
      @include moder($modes) {
        background-color: mode("colorCardBg");
        border-color: mode("colorBorder");
      }
    }

    &::after {
      opacity: 0;
    }
  }

  &.blue {
    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {
      background: $color-blue;
      @include moder($modes) {
        background-color: $color-blue;
      }
    }

    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {
      box-shadow: $el-box-shadow-blue;
    }

    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {
      opacity: 0.5;
    }
  }

  &.green {
    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {
      background: $color-green;
      @include moder($modes) {
        background-color: $color-green;
      }
    }

    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {
      box-shadow: $el-box-shadow-green;
    }

    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {
      opacity: 0.5;
    }
  }

  &.yellow {
    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {
      background: $color-yellow;
      @include moder($modes) {
        background-color: $color-yellow;
      }
    }

    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {
      box-shadow: $el-box-shadow-yellow;
    }

    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {
      opacity: 0.5;
    }
  }

  &.red {
    .gra-custom-form-input:checked ~ .gra-custom-form-label::before {
      background: $color-red;
      @include moder($modes) {
        background-color: $color-red;
      }
    }

    .gra-custom-form-input:checked:focus ~ .gra-custom-form-label::before {
      box-shadow: $el-box-shadow-red;
    }

    .gra-custom-form-input:disabled:checked ~ .gra-custom-form-label::before {
      opacity: 0.5;
    }
  }
}