$link: $color__primary-500;
$link-hover: $color__primary-700;

$primary: #f00;
$white: $color__neutral-900;
$danger: $color__accent-danger-300;
$success: $color__accent-success-300;

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma.sass";
@import "~buefy/src/scss/buefy";

.label {
  position: relative;
  color: $color__neutral-700;
  @include font-title(600);
}

.input, .textarea {
  $color-bg: $color__neutral-900;
  $gradient-from: .1;
  $gradient-to: .3;
  font-weight: 600;
  background-color: rgba($color__neutral-900, .7);
  background: linear-gradient(
                to bottom,
                rgba($color-bg, $gradient-from),
                rgba($color-bg, $gradient-to),
                rgba($color-bg, $gradient-to),
                rgba($color-bg, $gradient-from),
              ),
              linear-gradient(
                to right,
                rgba($color-bg, $gradient-from),
                rgba($color-bg, $gradient-to),
                rgba($color-bg, $gradient-to),
                rgba($color-bg, $gradient-from),
              );

  &:focus {
    $color-bg: #fff;
    $gradient-from: .1;
    $gradient-to: .5;

    background: $color-bg;
    background: linear-gradient(
                  to bottom,
                  rgba($color-bg, $gradient-from),
                  rgba($color-bg, $gradient-to),
                  rgba($color-bg, $gradient-to),
                  rgba($color-bg, $gradient-from),
                ),
                linear-gradient(
                  to right,
                  rgba($color-bg, $gradient-from),
                  rgba($color-bg, $gradient-to),
                  rgba($color-bg, $gradient-to),
                  rgba($color-bg, $gradient-from),
                );
  }
}

.help {
  @include font-body(600);
  font-size: .8em;
}