/**
 * Editor Toolbar Styles - Updated to match Figma design
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: $CAP_G10;
  border-bottom: 0.0625rem solid $CAP_G07;
  height: 3rem;
  border-radius: 0.25rem 0.25rem 0 0;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;

  &__left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 2.5rem;
  }

  &__title {
    font-family: $FONT_FAMILY;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: $CAP_G01;
    margin: 0;
    white-space: nowrap;
  }

  &__fullscreen-btn {
    color: $CAP_G01;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;

    &:hover {
      background-color: rgba($CAP_G01, 0.08);
      border-radius: 0.1875rem;
    }

    &:active {
      background-color: rgba($CAP_G01, 0.12);
    }

    // Icon sizing
    .anticon {
      font-size: 1rem;
      color: $CAP_G01;
    }

    // Cap UI icon sizing
    .cap-icon {
      font-size: 1rem;
      color: $CAP_G01;
    }
  }

  &__save-btn {
    background: map-get($CAP_PRIMARY, base);
    border-color: map-get($CAP_PRIMARY, base);
    color: $CAP_WHITE;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.1875rem;

    &:hover {
      background: map-get($CAP_PRIMARY, base);
      border-color: map-get($CAP_PRIMARY, base);
    }

    &:disabled {
      background: $CAP_G09;
      border-color: $CAP_G07;
      color: rgba($CAP_G01, 0.25);
    }
  }

  // Override cap-button-v2 styles with higher specificity
  &__fullscreen-btn.cap-button-v2 {
    padding: 0;
    min-width: inherit;
    height: inherit;
    width: inherit;

    span {
      display: none;
    }
  }
}

// Library mode override for InApp variant - Position absolute for toolbar
// These selectors target the toolbar when inside library mode InApp variant
.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar,
.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar.editor-toolbar,
.html-editor--inapp.html-editor--library-mode .html-editor__header .ant-layout-header.editor-toolbar {
  position: absolute;
}