@import "variables";

.input {
  margin: 1.5em auto 2em;
}

.input-text,
.input-textarea {
}

.input-textarea {
  min-height: 10em;
}

.new {
  margin: 0 auto;
  .input,
  .input-submit {
    width: 100%;
  }
}

.new .input-submit {
  background: transparent;
  &:focus {
    outline: none;
    box-shadow: 0 0 4px;
  }
}

.input {
  position: relative;

  .input-text,
  .input-textarea {
    padding: 1em;
    padding-right: 4em;
    width: 100%;
    height: 100%;

    transition: border-color 0.2s;

    &:focus {
      outline: none;
      border-color: #eee;
      box-shadow: inset 0 0 5px @black;
    }
  }

  .toggle {
    position: absolute;
    right: 1em;
    top: 1em;
    margin: auto;
    height: 1em;
    cursor: pointer;
  }

  .input-submit {
    margin-top: 1em;
    background-color: transparent;
    width: 100%;

    &:focus {
      outline: none;
      border-color: #eee;
      box-shadow: 0 0 4px;
    }
  }

  .new {
    .input-submit {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 1em;
    }
  }

  .input.textarea {
    margin-bottom: 4em;
  }
}