.mind-elixir-toolbar {
  position: absolute;
  color: var(--panel-color);
  background: var(--panel-bgcolor);
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);

  // svg {
  //   display: inline-block; // overwrite tailwindcss
  //   width: 18px !important;
  //   height: 18px !important;
  //   max-width: 18px !important;
  //   max-height: 18px !important;
  //   min-width: 18px !important;
  //   min-height: 18px !important;
  //   vertical-align: middle;
  //   flex-shrink: 0;
  //   // 确保图标内容在容器中居中
  //   object-fit: contain !important;
  //   object-position: center !important;
  // }
  svg {
    display: inline-block; // overwrite tailwindcss
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    vertical-align: middle;
    flex-shrink: 0;
  }
  span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    &:active {
      opacity: 0.7;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.mind-elixir-toolbar.rb {
  right: 15px;
  bottom: 15px;

  span + span {
    margin-left: 8px;
  }
}

.mind-elixir-toolbar.lt {
  font-size: 20px;
  left: 20px;
  top: 20px;

  span {
    display: block;
  }

  span + span {
    margin-top: 10px;
  }
}
