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

@layer payload-default {
  .relationship--multi-value-label {
    display: flex;
    padding-inline-start: base(0.4);
    gap: base(0.2);

    &__content {
      @extend %small;
      line-height: base(1.1);
      max-width: 150px;
      color: currentColor;
      display: flex;
      align-items: center;
    }

    &__text {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &__drawer-toggler {
      border: none;
      background-color: transparent;
      padding: 0;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: base(0.2);
      pointer-events: all;

      .icon {
        width: base(1);
        height: base(1);
        padding: base(0.1);
      }

      &:hover {
        background-color: var(--theme-elevation-150);
      }

      &:focus-visible {
        outline: var(--accessibility-outline);
      }
    }
  }
}