index.scss

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

@layer payload-default {
  .lexical-relationship {
    @extend %body;
    @include shadow-sm;
    padding: calc(var(--base) * 0.75);
    display: flex;
    align-items: center;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-elevation-100);
    border-radius: $style-radius-m;
    max-width: calc(var(--base) * 15);
    font-family: var(--font-body);
    margin-block: base(0.5);

    &:hover {
      border: 1px solid var(--theme-elevation-150);
    }

    &__label {
      margin-bottom: calc(var(--base) * 0.25);
    }

    &__title {
      margin: 0;
    }

    &__label,
    &__title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1 !important;
    }

    &__title {
      font-weight: bold;
    }

    &__wrap {
      flex-grow: 1;
      overflow: hidden;
    }

    &__doc-drawer-toggler {
      text-decoration: underline;
      pointer-events: all;
      line-height: inherit;
      & > * {
        margin: 0;
      }
    }

    &__swapButton.btn {
      margin: 0;
    }

    &__doc-drawer-toggler,
    &__swapButton {
      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }

    &__actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: calc(var(--base) * 0.5);

      & > *:not(:last-child) {
        margin-right: calc(var(--base) * 0.25);
      }
    }

    &__removeButton.btn {
      margin: 0;

      line {
        stroke-width: $style-stroke-width-m;
      }

      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }
  }
}