.form-group {
  margin: 10px 0;
  margin-bottom: 5px;
  .form-content {
    position: relative;
    .form-icon-floating {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 32px;
      height: 32px;

      position: absolute;
      bottom: 27.5px;

      font-size: 16px;

      transform: translateY(50%);

      padding: 6px;
      &.right {
        right: 12px;
        & + input {
          padding-right: 43px + 12px;
          background-image: none;
        }
      }
      &.left {
        left: 12px;
        & + input {
          padding-left: 43px + 12px;
          & + .focus-border + label {
            left: 12px + 43px;
          }
        }
      }
      &.clickable {
        cursor: pointer;
        border-radius: 50%;

        transition: background-color 250ms;
        &:hover {
          background-color: var(--dss-hover);
        }
      }
      &.icon-background {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 15px;
      }
      &.search {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzZWFyY2giIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1zZWFyY2ggZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MDUgNDQyLjdMNDA1LjMgMzQzYy00LjUtNC41LTEwLjYtNy0xNy03SDM3MmMyNy42LTM1LjMgNDQtNzkuNyA0NC0xMjhDNDE2IDkzLjEgMzIyLjkgMCAyMDggMFMwIDkzLjEgMCAyMDhzOTMuMSAyMDggMjA4IDIwOGM0OC4zIDAgOTIuNy0xNi40IDEyOC00NHYxNi4zYzAgNi40IDIuNSAxMi41IDcgMTdsOTkuNyA5OS43YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwbDI4LjMtMjguM2M5LjQtOS40IDkuNC0yNC42LjEtMzR6TTIwOCAzMzZjLTcwLjcgMC0xMjgtNTcuMi0xMjgtMTI4IDAtNzAuNyA1Ny4yLTEyOCAxMjgtMTI4IDcwLjcgMCAxMjggNTcuMiAxMjggMTI4IDAgNzAuNy01Ny4yIDEyOC0xMjggMTI4eiI+PC9wYXRoPjwvc3ZnPg==);
      }
      &.loading {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzcGlubmVyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtc3Bpbm5lciBmYS13LTE2IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTMwNCA0OGMwIDI2LjUxLTIxLjQ5IDQ4LTQ4IDQ4cy00OC0yMS40OS00OC00OCAyMS40OS00OCA0OC00OCA0OCAyMS40OSA0OCA0OHptLTQ4IDM2OGMtMjYuNTEgMC00OCAyMS40OS00OCA0OHMyMS40OSA0OCA0OCA0OCA0OC0yMS40OSA0OC00OC0yMS40OS00OC00OC00OHptMjA4LTIwOGMtMjYuNTEgMC00OCAyMS40OS00OCA0OHMyMS40OSA0OCA0OCA0OCA0OC0yMS40OSA0OC00OC0yMS40OS00OC00OC00OHpNOTYgMjU2YzAtMjYuNTEtMjEuNDktNDgtNDgtNDhTMCAyMjkuNDkgMCAyNTZzMjEuNDkgNDggNDggNDggNDgtMjEuNDkgNDgtNDh6bTEyLjkyMiA5OS4wNzhjLTI2LjUxIDAtNDggMjEuNDktNDggNDhzMjEuNDkgNDggNDggNDggNDgtMjEuNDkgNDgtNDhjMC0yNi41MDktMjEuNDkxLTQ4LTQ4LTQ4em0yOTQuMTU2IDBjLTI2LjUxIDAtNDggMjEuNDktNDggNDhzMjEuNDkgNDggNDggNDggNDgtMjEuNDkgNDgtNDhjMC0yNi41MDktMjEuNDktNDgtNDgtNDh6TTEwOC45MjIgNjAuOTIyYy0yNi41MSAwLTQ4IDIxLjQ5LTQ4IDQ4czIxLjQ5IDQ4IDQ4IDQ4IDQ4LTIxLjQ5IDQ4LTQ4LTIxLjQ5MS00OC00OC00OHoiPjwvcGF0aD48L3N2Zz4=);
        margin: 0 !important;
        animation: 1s linear infinite spinner;
      }
      &.eye {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJleWUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1leWUgZmEtdy0xOCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01NzIuNTIgMjQxLjRDNTE4LjI5IDEzNS41OSA0MTAuOTMgNjQgMjg4IDY0UzU3LjY4IDEzNS42NCAzLjQ4IDI0MS40MWEzMi4zNSAzMi4zNSAwIDAgMCAwIDI5LjE5QzU3LjcxIDM3Ni40MSAxNjUuMDcgNDQ4IDI4OCA0NDhzMjMwLjMyLTcxLjY0IDI4NC41Mi0xNzcuNDFhMzIuMzUgMzIuMzUgMCAwIDAgMC0yOS4xOXpNMjg4IDQwMGExNDQgMTQ0IDAgMSAxIDE0NC0xNDQgMTQzLjkzIDE0My45MyAwIDAgMS0xNDQgMTQ0em0wLTI0MGE5NS4zMSA5NS4zMSAwIDAgMC0yNS4zMSAzLjc5IDQ3Ljg1IDQ3Ljg1IDAgMCAxLTY2LjkgNjYuOUE5NS43OCA5NS43OCAwIDEgMCAyODggMTYweiI+PC9wYXRoPjwvc3ZnPg==);
      }
      &.eye-close {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJleWUtc2xhc2giIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1leWUtc2xhc2ggZmEtdy0yMCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zMjAgNDAwYy03NS44NSAwLTEzNy4yNS01OC43MS0xNDIuOS0xMzMuMTFMNzIuMiAxODUuODJjLTEzLjc5IDE3LjMtMjYuNDggMzUuNTktMzYuNzIgNTUuNTlhMzIuMzUgMzIuMzUgMCAwIDAgMCAyOS4xOUM4OS43MSAzNzYuNDEgMTk3LjA3IDQ0OCAzMjAgNDQ4YzI2LjkxIDAgNTIuODctNCA3Ny44OS0xMC40NkwzNDYgMzk3LjM5YTE0NC4xMyAxNDQuMTMgMCAwIDEtMjYgMi42MXptMzEzLjgyIDU4LjFsLTExMC41NS04NS40NGEzMzEuMjUgMzMxLjI1IDAgMCAwIDgxLjI1LTEwMi4wNyAzMi4zNSAzMi4zNSAwIDAgMCAwLTI5LjE5QzU1MC4yOSAxMzUuNTkgNDQyLjkzIDY0IDMyMCA2NGEzMDguMTUgMzA4LjE1IDAgMCAwLTE0Ny4zMiAzNy43TDQ1LjQ2IDMuMzdBMTYgMTYgMCAwIDAgMjMgNi4xOEwzLjM3IDMxLjQ1QTE2IDE2IDAgMCAwIDYuMTggNTMuOWw1ODguMzYgNDU0LjczYTE2IDE2IDAgMCAwIDIyLjQ2LTIuODFsMTkuNjQtMjUuMjdhMTYgMTYgMCAwIDAtMi44Mi0yMi40NXptLTE4My43Mi0xNDJsLTM5LjMtMzAuMzhBOTQuNzUgOTQuNzUgMCAwIDAgNDE2IDI1NmE5NC43NiA5NC43NiAwIDAgMC0xMjEuMzEtOTIuMjFBNDcuNjUgNDcuNjUgMCAwIDEgMzA0IDE5MmE0Ni42NCA0Ni42NCAwIDAgMS0xLjU0IDEwbC03My42MS01Ni44OUExNDIuMzEgMTQyLjMxIDAgMCAxIDMyMCAxMTJhMTQzLjkyIDE0My45MiAwIDAgMSAxNDQgMTQ0YzAgMjEuNjMtNS4yOSA0MS43OS0xMy45IDYwLjExeiI+PC9wYXRoPjwvc3ZnPg==);
      }
    }
    .focus-border {
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
      }
      &::before,
      &::after {
        bottom: 0;
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background-color: var(--dss-primary);
        transition: 0.3s;
      }
    }
  }

  input:focus + .focus-border,
  select:focus + .focus-border,
  textarea:focus + .focus-border,
  &.active .focus-border,
  &.invalid .focus-border,
  &.valid .focus-border {
    &::before,
    &::after {
      width: 100%;
      transition: 500ms;
    }
  }

  &.form-control-input,
  &.form-control-search,
  &.form-control-select,
  &.form-control-text-area {
    .form-content {
      input,
      input,
      select,
      textarea {
        width: 100%;
        padding: 8px 12px;
        outline: none;
        height: 55px;

        border: none;
        border-bottom: 2px solid #3332;

        padding-top: 23px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: var(--dss-background-field-light);
        &:hover {
          background-color: var(--dss-background-field);
        }
        &::placeholder {
          opacity: 0;
          color: var(--dss-text);
          transition: 250ms;
        }
        &:focus {
          background-color: var(--dss-background-field-dark);
          & + .focus-border + label {
            font-size: 12px;
            top: 5px;

            color: var(--dss-primary);
          }
          &::placeholder {
            opacity: 0.7;
          }
        }
      }
    }
    &:not(.form-group-label) {
      input,
      select,
      textarea {
        padding: 5px 12px;
        height: 40px;
        &::placeholder {
          opacity: 0.7;
        }
      }
      .form-icon-floating {
        bottom: 20px;
      }
    }
  }

  &.form-group-label {
    .form-content {
      label {
        position: absolute;
        top: 15px;
        left: 12px;

        transform: translate(0, 0) !important;

        color: var(--dss-label);

        font-size: 16px;

        transition: 250ms;

        white-space: nowrap;
        width: 80%;
        overflow: hidden;

        text-overflow: ellipsis;
        .required {
          color: var(--dss-danger);
        }
      }
    }
    &.active {
      .form-content {
        label {
          font-size: 12px;
          top: 5px;

          color: var(--dss-primary) !important;
        }
      }
    }
    &.invalid {
      .form-content {
        label {
          color: var(--dss-danger) !important;
          animation: 250ms linear shake;
        }
        .focus-border {
          &::before,
          &::after {
            background-color: var(--dss-danger);
          }
        }
      }
    }
    &.valid {
      .form-content {
        label {
          color: var(--dss-success) !important;
        }
        .focus-border {
          &::before,
          &::after {
            background-color: var(--dss-success);
          }
        }
      }
    }

    .form-content {
      .focus-border {
        &::before,
        &::after {
          background-color: transparent !important;
        }
      }
    }
  }

  .message {
    display: inline-block;

    margin: 5px 0 0 12px;

    font-size: 12px;
    color: var(--dss-text-light);

    animation: 250ms linear open-message;
    &.error {
      color: var(--dss-danger);
      & + .message {
        display: none;
      }
    }
  }
  &.invalid {
    color: var(--dss-danger);
  }
  &.valid {
    color: var(--dss-success);
  }
}