@import '~@payloadcms/ui/scss';

@layer payload-default {
  .rich-text-relationship {
    @extend %body;
    @include shadow-sm;
    padding: base(0.75);
    display: flex;
    align-items: center;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-elevation-100);
    max-width: base(15);
    font-family: var(--font-body);

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

    &[data-slate-node='element'] {
      margin: base(0.625) 0;
    }

    &__label {
      margin-bottom: 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;
    }

    &--selected {
      box-shadow: $focus-box-shadow;
      outline: none;
    }

    .rich-text-relationship__doc-drawer-toggler {
      text-decoration: underline;
      pointer-events: all;
      line-height: inherit;
    }

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

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

    &__removeButton {
      margin: 0;

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

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

    &__doc-drawer-toggler,
    &__list-drawer-toggler {
      & > * {
        margin: 0;
      }

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