.nes-input,
.nes-textarea {
  @mixin border-style($border, $outline) {
    @include compact-border-image($border);

    outline-color: $outline;
  }

  @include compact-rounded-corners();

  width: calc(100% - #{2 * $border-size});
  padding: 0.5rem 1rem;
  margin: 4px;
  background-clip: padding-box;

  &.is-dark {
    @include border-style(map-get($default-colors, "normal"), map-get($default-colors, "hover"));

    color: $background-color;
    background-color: $base-color;
  }
  &.is-success {
    @include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
  }
  &.is-warning {
    @include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
  }
  &.is-error {
    @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
  }
}

.nes-field {
  > label {
    display: block;
  }
  .nes-input,
  .nes-textarea {
    display: block;
  }

  &.is-inline {
    display: flex;
    align-items: center;

    > label {
      flex-basis: 0;
      flex-grow: 1;
      margin: 0;
      margin-right: 1.5rem;
      text-align: right;
    }

    .nes-input,
    .nes-textarea {
      flex-basis: 0;
      flex-grow: 5;
    }
  }
}

@media screen and (max-width: 768px) {
  .nes-field.is-inline {
    display: block;

    > label {
      margin-bottom: 0.5rem; // reboot.css:label
      text-align: left;
    }

    .nes-input {
      max-width: 100%;
    }
  }
}