/**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
:root, :host {
  --ck-footnotes-widget-label-background-color: var(--ck-color-base-text-light);
}

.ck.ck-editor__editable {
  & .footnotes.ck-widget {
    margin: .9em 0 .85em;
    display: flow-root;
    position: relative;

    &:not(:hover):not(.ck-widget_selected) {
      outline: 1px solid var(--ck-color-border-container);
    }

    &[data-footnotes-list-label]:after {
      content: attr(data-footnotes-list-label);
      padding: var(--ck-spacing-control-padding-block-compact) var(--ck-spacing-control-padding-inline);
      background-color: var(--ck-footnotes-widget-label-background-color);
      border-radius: var(--ck-widget-label-border-radius);
      font-size: 10px;
      font-family: var(--ck-font-face, var(--ck-font-family));
      color: #fff;
      white-space: nowrap;
      line-height: 16px;
      position: absolute;
      top: -1px;
      right: 10px;

      [dir="rtl"] & {
        left: 10px;
        right: auto;
      }
    }

    & > .footnotes-list > .footnote-definition {
      padding: var(--ck-spacing-padding-compact) 0;
    }
  }

  & .footnotes-divider {
    margin-top: 0;
  }

  & .footnotes-list {
    margin-top: 0;
    margin-bottom: .65em;
  }

  & .footnote-content.ck-editor__nested-editable {
    border-radius: var(--ck-input-border-radius);
    padding: var(--ck-input-padding);
    margin-top: calc(-1 * var(--ck-spacing-padding-compact));

    &.ck-editor__nested-editable_focused, &:focus {
      border-color: var(--ck-input-focus-border-color);
      box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
      outline: none;
    }
  }
}

:root, :host {
  --ck-footnotes-styles-list-style-button-size: 44px;
}

.ck.ck-footnotes-definitions-properties {
  & > .ck-footnotes-definitions-styles-list {
    row-gap: var(--ck-spacing-gap);
    column-gap: var(--ck-spacing-gap);
    padding: var(--ck-list-styles-list-padding);
    grid-template-columns: repeat(4, auto);
    display: grid;

    & .ck-button {
      width: var(--ck-footnotes-styles-list-style-button-size);
      height: var(--ck-footnotes-styles-list-style-button-size);
      box-sizing: content-box;
      margin: 0;
      padding: 0;

      & .ck-icon {
        width: var(--ck-footnotes-styles-list-style-button-size);
        height: var(--ck-footnotes-styles-list-style-button-size);
      }
    }
  }

  & > .ck-collapsible {
    border-top: var(--ck-border-divider);

    & .ck-footnotes-definitions-properties__start-index .ck-input {
      min-width: 100%;
    }
  }
}