/**----------------------------------*/
/** 全局样式 assets/media/css/ldbutton.css定义 */
/**-----------------------------------*/

/**label块组件, 大小**/
.night-light-label {
  display: inline-block;
  /* padding: 5px 0; */
  width: 50px;
  height: 24px;
  border: 1px solid #4672fe;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  /*匹配flex*/
}

/* sun icon*/
.sun-svg {
  left: 5px;
}

/*moon icon */
.moon-svg {
  right: 4px;
}

/**15px**/
.moon-svg,
.sun-svg {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 20%;
  /* transform: translateY(-50%); */
}

#night-light-ball {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 1px;
  left: 1px;
  border-radius: 50%;
  background-color: #f1c40f;
  z-index: 99;
  /* transition: left 300ms, background-color 300ms; */
  /* 避免第一次刷新时，从无到有的转换，将过渡在 js中添加，即页面加载后再使用该属性 */
}

.dark #night-light-ball {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 1px;
  left: 27px;
  border-radius: 50%;
  background-color: #4672fe;
  z-index: 99;
}

/*隐藏checkbox*/
#night-light-checkbox {
  position: absolute;
  visibility: hidden;
}

*,
* *,
*::before,
*::after {
  box-sizing: border-box;
}

/* svg背景填充颜色
.dark #moon-svg,
.dark #sun-svg {
  fill: #e0e0e0 !important;
} */
.sun-svg {
  fill: #f1c40f;
  /* 黄色 */
}

.moon-svg {
  fill: #4672fe;
  /* 深蓝色 */
}

/* 过渡样式 */
.dark .moon-svg {
  display: none;
}

html:not(.dark) .sun-svg {
  display: none;
}