.dig-input {
  position: relative;
  margin-top: 24px;
  margin-bottom: 48px;

  input, textarea {
    background-color: transparent;
    font-size: $input-font-size;
    border: 0;
    outline: none;
    border-bottom: 1px solid lightgray;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 14px;

    &[type="text"], &[type="password"], &[type="email"] {
      display: block;
      width: $input-width;
    }

    &:focus, &.dig-is-not-empty, &:disabled[value]:not([value=""]) {
      outline: none;
      box-shadow: none;
      &~.dig-input-placeholder {
        color: blue;
        font-size: $input-placeholder-size !important;
        font-weight: 300;
        top: -32px;
        @include ease-out();
      }
      &~.dig-input-highlight {
        width: 0;
        background-color: blue;
        @include ease-out();
      }
      &~.dig-input-bar {
        &::before, &::after {
          background-color: blue;
          width: 50%;
        }
      }
      &~.dig-input-description {
        display: block;
      }
    }

    &:not(:focus).dig-is-not-empty, &:disabled[value]:not([value=""]) {
      &+.dig-input-placeholder {
        color: gray;

        &+.dig-input-highlight {
          &+.dig-input-bar {
            &::before, &::after {
              width: 0;
            }

            &+.dig-input-description {
              display: none;
            }
          }
        }
      }
    }

    &+.dig-input-placeholder {
      font-size: $input-font-size;
      color: gray;
      position: absolute;
      top: -4px;
      //z-index: -1;
      @include ease-out();
    }
  }

  .dig-input-highlight {
    content: '';
    position: absolute;
    background-color: transparent;
    opacity: 0.25;
    height: 19px;
    top: -3px;
    width: ($input-width/2);
    z-index: -1;
  }

  .dig-input-bar {
    position: relative;
    display: block;
    width: $input-width;

    &::before, &::after {
      content: '';
      height: $input-bar-height;
      top: (-1 * $input-bar-height);
      width: 0;
      position: absolute;
      @include ease-out();
    }

    &::before {
      left: 50%;
    }

    &::after {
      right: 50%;
    }
  }

  .dig-input-description {
    display: none;
    color: blue;
    position: absolute;
  }

  .dig-input-error {
    display: none;
    color: $input-error-color;
    position: absolute;
  }

  &.dig-error {
    input, textarea {
      &:focus, &.dig-is-not-empty {
        &+.dig-input-placeholder {
          color: $input-error-color;

          &+.dig-input-highlight {
            width: 0;
            background-color: red;

            &+.dig-input-bar {

              &::before, &::after {
                background-color: $input-error-color;
              }

              &+.dig-input-description {
                display: none;
              }
            }
          }
        }
      }

    }

    .dig-input-error {
      display: block;
    }
  }

  &.dig-floating {
    margin-top: $desktop-gutter;
    input, textarea {
      &:focus {
        &+.dig-input-placeholder {
          display: block;
          color: gray;
          font-size: 16px !important;
          font-weight: 400;
          top: -4px;
        }

        &.dig-is-not-empty {
          &+.dig-input-placeholder {
            display: none;
          }
        }
      }

      &.dig-is-not-empty {
        &+.dig-input-placeholder {
          display: none;
        }
      }
    }
  }

  &.dig-disabled { opacity: 0.4 }
}

::-webkit-input-placeholder {
  position: absolute !important;
  top: -20px !important;
}