.FormField {
  position: relative;
  box-sizing: border-box;
  padding: 1px;
}

.FormField__border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--field_border);
  background: var(--field_background);
  content: '';
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 1;
  transform-origin: left top;
}

.Textarea .Textarea__el:not(:disabled) ~ .FormField__border--hover,
.Select:not(.Select--disabled) .FormField__border--hover,
.Input .Input__el:not(:disabled) ~ .FormField__border--hover,
.ChipsInput:not(.ChipsInput--disabled) .ChipsInput__container ~ .FormField__border--hover {
  border-color: var(--icon_tertiary_alpha);
}

.FormField--ios {
  border-radius: 10px;
}

.FormField--android {
  border-radius: 8px;
}

.FormField--vkcom {
  border-radius: 6px;
}

.FormField > * {
  border-radius: inherit;
}

.FormItem--error .FormField__border {
  background: var(--field_error_background);
  border-color: var(--field_error_border);
}

.FormItem--valid .FormField__border {
  border-color: var(--field_valid_border);
}

.Textarea .Textarea__el:disabled ~ .FormField__border,
.Select .Select__el:disabled ~ .FormField__border,
.Input .Input__el:disabled ~ .FormField__border,
.ChipsInput.ChipsInput--disabled .ChipsInput__container ~ .FormField__border {
  opacity: .4;
}

@media (min-resolution: 2dppx) {
  .FormField--ios .FormField__border {
    border-radius: 20px;
    transform: scale(.5);
    width: 200%;
    height: 200%;
  }
}

@media (min-resolution: 3dppx) {
  .FormField--ios .FormField__border {
    border-radius: 31.25px;
    transform: scale(.32);
    width: 312.5%;
    height: 312.5%;
  }
}

.FormField.Input .Input__el:focus ~ .FormField__border,
.FormField.Textarea .Textarea__el:focus ~ .FormField__border,
.FormField.Select .Select__el:focus ~ .FormField__border,
.FormField.Select--mimicry:focus .FormField__border,
.FormField.ChipsInput--focused .ChipsInput__container ~ .FormField__border {
  border-color: var(--accent);
  background: var(--field_background);
}

.CustomSelect__open.Select--mimicry:focus .FormField__border {
  border-color: var(--field_border);
}

.FormField--ios.CustomSelect__open .FormField__border,
.FormField--ios.ChipsSelect__open .FormField__border {
  border-radius: 10px 10px 0 0;
}

.FormField--android.CustomSelect__open .FormField__border,
.FormField--android.ChipsSelect__open .FormField__border {
  border-radius: 8px 8px 0 0;
}

.FormField--vkcom.CustomSelect__open .FormField__border,
.FormField--vkcom.ChipsSelect__open .FormField__border {
  border-radius: 6px 6px 0 0;
}

.FormField--ios.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border,
.FormField--ios.ChipsSelect__open.ChipsSelect__open--popupDirectionTop .FormField__border {
  border-radius: 0 0 10px 10px;
}

.FormField--android.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border,
.FormField--android.ChipsSelect__open.ChipsSelect__open--popupDirectionTop .FormField__border {
  border-radius: 0 0 8px 8px;
}

.FormField--vkcom.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border,
.FormField--vkcom.ChipsSelect__open.ChipsSelect__open--popupDirectionTop .FormField__border {
  border-radius: 0 0 6px 6px;
}
