@import "../vars.less";

.hive-form {

  &-item {
    display: flex;
    margin-bottom: 22px;
    position: relative;

    &-label {
      width: 6em;
      margin-right: 16px;
      line-height: 40px;
      opacity: 0.8;
      font-size: 14px;
    }

    &-control {
      flex: 1;
      position: relative;
    }



    &-err {
      display: none;
      margin-top: 2px;
      font-size: 12px;
      line-height: 16px;
      color: #FF3E00;
    }

    &-icon {
      position: absolute;
      top: 8px;
      right: -28px;
      font-size: 16px;
    }

    .hive-form-item-icon {
      display: none;
    }

    .hive-icon {

      &--line_circle_help {
        color: #FFA700;
        cursor: pointer;
      }

      &--circle_clear {
        color: #ff3e00;
      }

      &--circle_tick {
        color: #3ecc36;
      }

      &--circle_error {
        color: #FFA700;
      }

      &--loading {
        display: inline-block;
        position: relative;
        top: -3px;
        left: -4px;
        height: 14px;
        width: 14px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1RDg2N0FDNjc2NzExRTlCMjM0RDk1OTZEOEM0RDFDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1RDg2N0FENjc2NzExRTlCMjM0RDk1OTZEOEM0RDFDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTVEODY3QUE2NzY3MTFFOUIyMzREOTU5NkQ4QzREMUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTVEODY3QUI2NzY3MTFFOUIyMzREOTU5NkQ4QzREMUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Z7wmnAAAE60lEQVR42rRWS4hdRRDtqu5773vzZpKYIHFioiZxJOJO8BPFjZCVET+rgC4lIIaALozg5gUigiDBldGNn4ALF4Kg4kIxokSIiuB3IvkZksl/ZDKZ8Xbf7iqr+r0xAfN5MmPDvd333u46VXVO1XtgBhi3bz04lshuIErriXFFTDyamBwlOJOYTzVsvsFEH53bfdtv17IFV/t4z4vH7k2BtkaidUTsYjI2sRHb7BIZK8CWWN7JrM+JYTwZs33qnbWf/yfAh17+47rZGl8QQ+sjibEESBmEbX5myCCReuDMPXB5tqROGPjSAT1z8q2xM9cEfHzHoZs9lN1IcENKyYlxFONOI+tH5BSMNCKNkvrrPmjKDuZ9J5DskxNvrx6/IuCmV4+vEqAdcmBEU5WjyQahb7gXRTZKc47wJSm9JM05IzDDzjw68fqa/f8C3PzGxJAPsF02jsZoUCPRlGXusteSPmZHl3AnzvWjIdck3dsDunjOIDMfRzIPH3pz7ZTiuDlAB/iEKWCRGKsdqkA42SwIkyyhlQeNIpEIx6IaBosaNUqKCaM8OOVaKIjyURyTd5QdXB6BXxKILf9EuO3dyZt8jM/F1BOBet8kweG5COb4gYvp05Qpv/2051Tnvfm7KlqiJFWzOCFOGbdp/2urfswRoo0bKgM+ey4RJX2FtgeMPe4cCo/J7IOCP/NER/VcbPCWhszGGPlBpzzLeeFbxRU1S1K7SZxBoUSmpBFuhu4n5xbBND3bqKTFY0rqlRqnHKEYswk4msTv7Xp6dN/lyuiRVyYeoMhbxPBwoj7PfR6V+9hXti3SRhzyuKYqrG8X4FsOQiWzXq3S+sLJukTfxiuD6fjw+RVfFZZ3ybnQKrCunNoyoXRGbYUqz8YD4/04VNqVpWMBAF8WUCt4YQXIsm9nQP5151NXBpsbH2xb+UXLwvcCFkoBLfVsgWITvbyrdS3O3OkqRy1A8DGJ6pQD6WOIktoIjoTLkuFrM+AoS/exlMg6p8KyWqaiAaGELPQUTrzM2dLaVkIfpS0IgIgEIgg4y5yd6IRjgwIuNvbgBZu8BVX7HG+5Ibheo8COaxdGCg09aBlErTHU2rKBwKkyR6eW14MCLptceoFvPLs7SHpSgyhOQ5DGynKJYDECGNeyeF6iG3bWSXSksnYJE8otNs7YaTo7JLamBwHsdkGSZPZcbY9zhZ9GrorYJFs4tIFNJMFrxCcpQUuLyuWDAg4yXKssp6R+OqWzNsTkjNQQO4wuonQb/ZE1a2XfgYUClCyb04XjINxJLWLdLmxdIYu0ObQq1Dpc/P7e+taFAgTp5nbv+F93N8KdlAXWITlp/sgUbTAga1FclEiBfvr5050Hu90uzQtQb9/+Xq9hi8uaEF0SSUcFFRHJnJsyS4szWlOGzj9218ieeXGotyVQHY9l6MwQF4SFCNhFQ9H50mKVfxelZDTqaM7Pm0O9jY2BDz6cag+72kLw7dIELFhaEwdpAb5ltd1xGB4ZOjpvDucWwiUemDQrUu07SQo+zUqHkJlSYzXqMNvwfXcMfQcAPO8IMzIA/bDUnOhU1YWyYd+pepczzltjfNGCk/MFu+y/NlXtkSMz13NlKytNdyZIu5NlOWqOrAaoFxywDwqTk2Zkls1IE2ppvK00thKOmf97CLA7fPjPJb+cPj28UDb/FmAARrJqMhu4NuEAAAAASUVORK5CYII=');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: spin 1s linear infinite;
      }
    }

    &--required {
      .hive-form-item-label {
        &:before {
          content: '*';
          display: inline;
          color: @error-color;
          margin-right: 5px;
        }
      }
    }

    &--error {
      margin-bottom: 4px;

      .hive-form-item-err {
        display: block;
      }

      .hive-input__input {
        border-color: #FF3E00;

        input {
          color: #ff3e00;
        }
      }
    }

    &--warning {
      .hive-input__input {
        border-color: #FFA700;
      }
    }

    &--icon {
      .hive-form-item-icon {
        display: inline-block;
      }
    }
  }

  &--inline {
    .hive-form-item {
      display: inline-flex;

      &-label {
        width: auto;
      }
    }

    .hive-form-item+.hive-form-item {
      margin-left: 8px;
    }
  }
}