@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-text-editor-toolbar-action') {
  --sky-override-text-editor-border-radius: 0;
  --sky-override-text-editor-button-border-outer-radius: 3px;
  --sky-override-text-editor-button-border: #{1px solid
    $sky-border-color-neutral-medium};
  --sky-override-text-editor-colorpicker-spacing: 10px;
  --sky-override-text-editor-colorpicker-top: 3px;
}

.sky-text-editor-toolbar-action {
  .sky-text-editor-font-picker
    ::ng-deep
    .sky-dropdown-button-content-container {
    width: 140px;
    height: 20px;
    text-align: left;
  }

  .sky-text-editor-colorpicker-group {
    display: flex;

    .sky-text-editor-colorpicker-container {
      position: relative;
      top: var(--sky-override-text-editor-colorpicker-top, -2px);
      margin-right: var(
        --sky-override-text-editor-colorpicker-spacing,
        var(--sky-space-gap-action_group-m)
      );

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .sky-switch-icon-group {
    .sky-btn {
      margin-left: 0;
      margin-right: 0;
      border-radius: var(
        --sky-override-text-editor-border-radius,
        var(--sky-border-radius-s)
      );
      border-right: none;
    }

    .sky-btn:first-of-type {
      border-top-left-radius: var(
        --sky-override-text-editor-button-border-outer-radius,
        var(--sky-border-radius-s)
      );
      border-bottom-left-radius: var(
        --sky-override-text-editor-button-border-outer-radius,
        var(--sky-border-radius-s)
      );
    }
    .sky-btn:last-of-type {
      border-top-right-radius: var(
        --sky-override-text-editor-button-border-outer-radius,
        var(--sky-border-radius-s)
      );
      border-bottom-right-radius: var(
        --sky-override-text-editor-button-border-outer-radius,
        var(--sky-border-radius-s)
      );
      border-right: var(--sky-override-text-editor-button-border, none);
    }
  }
}
