@import '~@kaizen/design-tokens/sass/animation';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';

@layer kz-components {
  .editorLabel {
    margin-bottom: $spacing-6;
    display: inline-block;
  }

  .editableContainer :global(.ProseMirror) {
    padding: calc($spacing-12 - $border-solid-border-width);
    position: relative;
    border-radius: $border-solid-border-radius;
    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
    transition:
      background-color $animation-duration-immediate,
      border-color $animation-duration-immediate;
    background-color: $color-white;
    min-height: $typography-paragraph-body-line-height;
  }

  .editableContainer:hover :global(.ProseMirror) {
    background-color: $color-gray-200;
  }

  .editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
    background-color: $color-gray-200;

    &::before {
      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);

      pointer-events: none;
      content: '';
      position: absolute;
      background: transparent;
      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
      border-radius: 10px;
      inset: calc(-1 * #{$focus-ring-offset});
      z-index: 1;
    }
  }
}