/* =============================================================================
   components/_text-editor-toolbar.scss
   Styles for the fixed text block editor toolbar
   ============================================================================= */

.text-block-editor-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  transform: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid #eee;
  border-radius: 21px;
  box-shadow: var(--shadow-default);
  z-index: 1000;


  .tb-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text);

    &:hover {
      background: var(--color-secondary-light);
    }

    &.active {
      background: color-mix(in srgb, var(--user-color), black 20%);
      color: var(--color-white);
      @supports not (background: color-mix(in srgb, #000, black 20%)) {
        background: var(--user-color);
        opacity: .8;
      }
    }
  }

  .font-size-control {
    background: var(--color-white-dark);
    border-radius: 4px;

    .fs-dec {
      border-right: 1px solid var(--color-secondary-light);
    }

    .fs-inc {
      border-left: 1px solid var(--color-secondary-light);
    }

    .fs-btn {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .fs-dropdown {
      position: relative;

      &.open .fs-options {
        display: block;
      }
    }
  }

  .font-family-control,
  .font-size-control {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ff-options,
  .fs-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid #eee;
    box-shadow: var(--shadow-default);
    border-radius: 4px;
    padding: 4px;
    z-index: 1000;

    span {
      display: block;
      padding: 2px 4px;
      cursor: pointer;

      &:hover {
        background: var(--color-secondary-light);
      }
    }
  }
  .fs-input{
    width: 50px;
    padding: 2px 4px;
    border: 1px solid var(--color-secondary-light);
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    background: var(--color-white);
    color: var(--color-text);
  }
}
