open-vault/ui/app/styles/core/forms.scss

form {
  margin: 0;
}
label {
  cursor: pointer;
  &.is-select-list {
    padding: 10px 0px;
    &:hover {
      color: $blue;
    }
  }
}

.masked-font {
  font-family: obscure, text-security-square;
  letter-spacing: 2px;
}

.label {
  color: $grey-darker;
  text-transform: uppercase;
  font-size: $size-small;
}

.is-label,
.b-checkbox .is-label {
  color: $grey-darker;
  display: inline-block;
  font-size: $body-size;
  font-weight: $font-weight-bold;

  &:not(:last-child) {
    margin-bottom: 0.25rem;
  }
  // Sizes
  &.is-small {
    font-size: $size-small;
  }
  &.is-medium {
    font-size: $size-medium;
  }
  &.is-large {
    font-size: $size-large;
  }

  &::before,
  &::after {
    transform: translateY(0.2em);
  }

  &::before {
    border-color: $grey-light;
  }
}

.b-checkbox .is-label {
  display: inline;
  margin-left: $size-10;
}

.b-checkbox > .sub-text {
  padding-left: 2rem;
}

.help {
  &.is-danger {
    font-weight: $weight-bold;
  }
}

.is-help {
  font-size: $size-small;
  margin-top: 0.25rem;
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    &.is-#{$name} {
      color: $color;
    }
  }
}

.sub-text {
  color: $grey;
  margin-bottom: 0.25rem;
  font-size: $size-8;
}
.input,
.textarea,
.select select {
  border-color: $grey-light;
  color: $grey-dark;
  padding-left: $size-8;
  padding-right: $size-8;
  @include until($desktop) {
    font-size: 16px;
  }
  &::placeholder {
    opacity: 0.5;
  }
}

.input,
.select select,
.control.has-icons-left .icon,
.control.has-icons-right .icon {
  height: 2.5rem;
}

.input.variable {
  font-family: $family-monospace;
}
.input[disabled],
.textarea[disabled] {
  border-color: $grey-lightest;
  background-color: $white-ter;
  color: $grey-light;
}

.control {
  max-width: 100%;

  // Modifiers
  &.has-icons-left,
  &.has-icons-right {
    .input,
    .select select {
      padding-left: 2rem;

      &:focus,
      &.is-focused,
      &:active,
      &.is-active {
        & ~ .icon {
          color: currentColor;
        }
      }
    }
  }
  &.has-checkbox-right {
    label.checkbox {
      display: inline-flex;
      height: 2.5em;
      position: absolute;
      top: 0;
      right: 0;
      justify-content: flex-end;
      margin-left: auto;
    }
    .input,
    .select select {
      padding-right: 10em;
    }
  }
}

.input,
.textarea {
  box-shadow: 0 4px 1px rgba($black, 0.06) inset;

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: findColorInvert($color);
    $color-bg: nth($pair, 2);
    &.is-#{$name} {
      border-color: $color;
      background-color: $color-bg;
      &.is-inverted {
        border-color: rgba($color-invert, 0.3);
        background-color: $color-bg;
        &::placeholder {
          color: rgba($color-invert, 0.3);
        }
        &:focus,
        &.is-focused,
        &:active,
        &.is-active {
          border-color: rgba($color-invert, 1);
          background-color: $color-bg;
          color: $color-invert;
          &::placeholder {
            color: rgba($color-invert, 0.7);
          }
        }
      }
    }
  }
  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    background-color: $input-focus-background-color;
  }
}

.select select {
  background-color: $ui-gray-050;
  box-shadow: 0 3px 1px rgba($black, 0.12);

  .has-background-grey-lighter & {
    background-color: $white;
  }
}

.select:not(.is-multiple) {
  height: 2.5rem;
}

.select:not(.is-multiple)::after {
  content: svg-uri(
    '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>'
  );
  border: 0;
  height: 24px;
  margin: 0;
  right: $spacing-xs;
  transform: translateY(-50%);
  width: 24px;
}

.field:not(:last-child) {
  margin-bottom: 1.5rem;
}
.field-body .field {
  margin-bottom: 0;
}
.field {
  // cannot use :read-only selector because tag used for other purposes
  &.is-readOnly {
    background-color: $ui-gray-100;
    cursor: not-allowed;
  }
}
.field.has-addons {
  flex-wrap: wrap;
  .control {
    .button,
    .checkbox,
    .input,
    .select select {
      border-radius: 0;
      &:hover,
      &.is-hovered {
        z-index: 2;
      }
      &:focus,
      &.is-focused,
      &:active,
      &.is-active {
        z-index: 3;
        &:hover {
          z-index: 4;
        }
      }
    }
    &:first-of-type {
      flex-grow: 1;
      .button,
      .checkbox,
      .input,
      .select select {
        border-bottom-left-radius: $input-radius;
        border-top-left-radius: $input-radius;
      }
    }
    &:last-child {
      .button,
      .checkbox,
      .input,
      .select select {
        border-bottom-right-radius: $input-radius;
        border-top-right-radius: $input-radius;
      }
    }
  }
  & > .label {
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
  }
  .checkbox {
    @include input;
    background-color: $grey-lightest;
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      &.is-#{$name} {
        border-color: $color;
      }
    }
    input {
      margin-right: 0.5em;
    }
  }
}

.file-label {
  overflow: visible;
}

.file-input {
  visibility: hidden;
}

.file-cta {
  min-width: auto;

  .icon:first-child:last-child {
    display: inline-block;
    margin-right: 0.1rem;
    vertical-align: middle;
  }
}

.file-name {
  @extend .input;
}

.file-delete-button {
  @extend .button;
  @extend .is-transparent;
  color: $grey;
  position: absolute;
  right: 8px;
}

fieldset.form-fieldset {
  border: none;
}

.has-error-border {
  border: 1px solid $red-500;
}