@import "../../../../styles/index.scss";

.editor-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--toolbar-bg, $whiteColor); // #ffffff

  .format-button {
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: var(
      --icon-color,
      $color-text-secondary
    ); // #4a5568 → closest neutral

    &:hover {
      background-color: var(--hover-bg, $offWhiteColor); // #f5f5f5
    }

    &.is-active {
      background-color: var(--active-bg, $infoBackground); // #e3f2fd
      color: var(--active-color, $primaryColor); // #2196f3
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  // Group related buttons
  .format-group {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    border-right: 1px solid var(--border-color, $menuBorderColor); // #e0e0e0

    &:last-child {
      border-right: none;
    }
  }

  // Responsive design
  @media (max-width: 768px) {
    gap: 4px;
    padding: 4px;

    .format-button {
      padding: 3px;
    }

    .format-group {
      padding: 0 2px;
    }
  }
}
