@use 'sass:math';

/*
 * Styles for values.
 */
.lf-value {
  position: relative;

  &.lf-inline-value {
    display: block;
  }

  // Space between values
  &:not(:last-child) {
    margin-bottom: $spacer;
  }

  // Label
  & > .label {
    margin-bottom: math.div($spacer, 4);
    // Help
    & ~ lf-help-tooltip {
      margin-left: math.div($spacer, 4);
    }
  }

  // "Required" icon
  & > .is-required {
    display: block;
    position: absolute;
    left: $required-position-left;
    margin-top: $required-position-top;
    font-size: $required-size;
    color: $required-color;
    text-shadow: $required-text-shadow;
    z-index: 5;
  }

  // Validation status
  & > .status {
    position: absolute;
    margin-top: $pending-position-top;
    right: $pending-position-right;
    z-index: 5;

    // Pending "loading" icon
    &.pending {
      @include loading($pending-size, $pending-border-size);
    }
    // Rejected styles
    &.rejected {
      color: theme-color('danger');
      cursor: pointer;
      font-size: 0.9rem;
      text-shadow: 2px 0 #fff;
    }
  }

  // Value state is shown when not in production
  // TODO: This shouldn't be bundled to production (how?)
  &:hover > lf-value-state > .value-state-icon {
    opacity: 0.5;
    cursor: pointer;
  }
  & > lf-value-state {
    display: block;
    position: absolute;
    right: 12px;
    margin-top: -14px;

    & > .value-state-icon {
      opacity: 0;
      font-size: 0.8rem;
    }
  }

  // Legend
  & > .legend {
    display: flex;
    justify-content: flex-end;
    margin-top: math.div($spacer, 4);
    font-size: $small-font-size;
    line-height: 1.1rem;
    color: $text-muted;
  }

  // Override Bootstrap styles =================================================

  .input-group {
    // Unrestrict the height of some elements
    & > .form-control,
    & > .input-group-prepend > .input-group-text,
    & > .input-group-append > .input-group-text,
    & > .input-group-prepend > .btn,
    & > .input-group-append > .btn {
      height: auto;
    }

    // Styles for invalid input groups
    &.is-invalid {
      .form-control {
        // Colours of read-only elements
        &.is-readonly {
          background-color: $form-feedback-invalid-disabled-bg;
          color: $form-feedback-invalid-color;
        }
      }

      // Style of "addons" (e.g. the code or icons in certain components)
      .input-group-text {
        border-color: $form-feedback-invalid-color;
        background-color: $form-feedback-invalid-addon-bg;
        color: $white;
      }
    }

    // Styles for warned input groups
    &.is-warning {
      .form-control {
        // Colours of read-only elements
        &.is-readonly {
          background-color: $form-feedback-warning-disabled-bg;
          color: $form-feedback-warning-color;
        }
        // Focus shadow colour
        &:focus {
          box-shadow: $form-feedback-warning-focus-shadow;
        }
      }

      // Style of "addons" (e.g. the code or icons in certain components)
      .input-group-text {
        border-color: $form-feedback-warning-color;
        background-color: $form-feedback-warning-addon-bg;
        color: $white;
      }
    }
  }

  .form-control {
    // Background colour of read-only elements
    &.is-readonly {
      background-color: $input-disabled-bg;
      color: $input-color;
    }
    &.is-warning {
      border-color: $form-feedback-warning-color;
    }
    &.is-invalid {
      border-color: $form-feedback-invalid-color;
    }
  }

  // Animate "addons" (e.g. the code or icons in certain components)
  .input-group-text {
    @include transition($input-transition);
  }
}