@import '../../../styles/common.scss';

.container {
  @include boxSizing;

  display: grid;
  grid-template-columns: var(--label-size, $label-size) 1fr;
  grid-template-rows: 1fr min-content;
  grid-column-gap: var(--label-gap, $label-gap);
  align-items: center;

  &.inline {
    grid-template-columns: 1fr;
  }

  .content {
    display: grid;
    align-self: start;
    font-size: var(--label-font-size, $label-font-size);
    color: var(--input-color, $input-color);
    max-width: 100%;
  }

  .label {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    align-self: start;

    &.sticky {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    label {
      color: var(--input-label-color, $input-label-color);
      font-size: var(--label-font-size, $label-font-size);
      font-weight: bold;
      overflow-wrap: anywhere;

      .tooltip {
        margin-left: 5px;
        vertical-align: middle;
        font-weight: initial;
        font-size: initial;
        color: initial;
        overflow-wrap: initial;
      }
    }
  }

  .error {
    padding-top: 6px;
    grid-row: 2;
    grid-column: 2;
    color: var(--input-invalid-color, $input-invalid-color);
    white-space: normal;

    &.inlineMode {
      grid-column: 1;
    }
  }
}
