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

@layer payload-default {
  .value-container {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: calc(var(--base) / 2);

    &__label {
      color: var(--theme-elevation-550);
    }

    .rs__value-container {
      overflow: visible;
      padding: 2px;
      gap: 2px;

      > * {
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        color: currentColor;

        .field-label {
          padding-bottom: 0;
        }
      }

      &--is-multi {
        width: calc(100% + base(0.25));

        &.rs__value-container--has-value {
          padding: 0;
          margin-inline-start: -4px;
        }
      }
    }
  }
}