.arttao-share-wrap{
  --cyan:#CCFFFF;
  --pink:#FFCCFF;
  --cream:#FFEBCD;
  --text:#24363d;

  position:relative;
  display:block;
  width:100%;
  margin:10px 0;
  font-family:inherit;
}

.arttao-align-left{
  text-align:left;
}

.arttao-align-center{
  text-align:center;
}

.arttao-align-right{
  text-align:right;
}


/* =========================
   分享主按钮
   ========================= */

.arttao-share-master{
  width:40px;
  height:26px;

  padding:0;
  margin:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  position:relative;

  border:1px solid #F5DEB3;
  border-radius:20%;

  background:var(--cyan);
  color:var(--text);

  font-size:12px;
  font-weight:400;
  line-height:1;

  white-space:nowrap;
  writing-mode:horizontal-tb;

  cursor:pointer;
  box-shadow:none;
}

.arttao-share-master:hover{
  filter:brightness(.985);
}


/* 完全隐藏原来的小三角 */

.arttao-share-arrow{
  display:none !important;
}


/* =========================
   分享展开面板
   ========================= */

.arttao-share-panel{
  width:auto;
  max-width:50%;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;

  margin:9px auto 0;
  padding:10px;

  border:1px solid #ececec;
  border-radius:20px;

  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.06);
}

/* 左对齐 */

.arttao-align-left .arttao-share-panel{
  margin-left:0;
  margin-right:auto;
}


/* 右对齐 */

.arttao-align-right .arttao-share-panel{
  margin-left:auto;
  margin-right:0;
}


/* 隐藏状态 */

.arttao-share-panel[hidden]{
  display:none !important;
}


/* =========================
   分享选项按钮
   ========================= */

.arttao-share-item{
  min-height:32px;

  padding:6px 8px;

  border:1px solid var(--pink);
  border-radius:5px;

  background:#fff;
  color:var(--text);

  font-size:12px;
  font-weight:400;

  cursor:pointer;
}

.arttao-share-item:hover{
  background:#f9ffff;
}


/* =========================
   提示文字
   ========================= */

.arttao-share-message{
  min-height:18px;

  margin-top:6px;

  font-size:11px;
  color:#666;

  text-align:center;
}


/* =========================
   手机端
   ========================= */

@media (max-width:520px){

  .arttao-share-panel{
    grid-template-columns:1fr;
  }

  .arttao-share-master{
    width:60px;
  }

}