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

@layer payload-default {
  .rich-text-lexical--show-gutter {
    .insert-paragraph-at-end {
      padding: 4px 0px 2px 40px;
    }
  }
  .insert-paragraph-at-end {
    height: 24px;
    margin-top: -16px;
    width: 100%;
    z-index: 0;
    position: relative;
    padding: 4px 0px 2px 0px;

    &-inside {
      width: 100%;
      height: 100%;
      background-color: transparent;
      transition: background-color 0.1s ease-in-out;
      display: flex;
      justify-content: center;
      border-radius: $style-radius-s;
      color: var(--theme-elevation-500);

      span {
        display: none;
        justify-content: center;
        align-items: center;
      }
    }

    &:hover {
      cursor: pointer;

      .insert-paragraph-at-end-inside {
        background-color: var(--theme-elevation-100);

        span {
          display: flex;
        }
      }
    }
  }

  html[data-theme='dark'] {
    .insert-paragraph-at-end:hover {
      .insert-paragraph-at-end-inside {
        background-color: var(--theme-elevation-50);
      }
    }
  }
}
