@use '../../internals/Box/styles/index' as box;

//
// FormGroup
// --------------------------------------------------
.rs-form-group {
  position: relative;
  display: flex;
  flex-direction: var(--rs-form-group-direction);
  gap: var(--rs-form-group-spacing);

  .rs-input {
    display: inline-block;
  }

  // Fixed inline element will produce a whitespace
  textarea.rs-input {
    vertical-align: bottom;
  }
}

// Vertical forms
.rs-form-stack-vertical .rs-form-group {
  .rs-form-control-label {
    display: block;
    width: fit-content;
  }
}

.rs-form-stack {
  --rs-form-group-spacing: var(--rs-spacing);
  --rs-form-group-direction: column;
}

// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

.rs-form-stack-horizontal {
  --rs-form-control-label-width: 170px;
  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
  --rs-form-group-direction: row;

  .rs-form-group {
    align-items: baseline;

    .rs-form-control-label {
      display: inline-block;
      font-size: var(--rs-font-size-sm);
      width: var(--rs-form-control-label-width);
      text-align: end;
    }

    .rs-btn-toolbar {
      padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
    }
  }
}

// Inline
.rs-form-stack-inline {
  --rs-form-group-direction: row;
  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);

  .rs-form-group {
    align-items: center;
  }
}

.rs-form-stack-fluid {
  .rs-form-group {
    width: 100%;
  }
}