////////符号////////
// 箭头
.d-arrow-icon {
  display: flex;
  justify-content: space-around;
  width: 12px;
  font-style: normal;
  transition: all .3s;
  &:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 9px;
    background: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 9px;
    background: currentColor;
    transform: rotate(45deg);
  }
  &.d-arrow-up {
    transform: rotate(-180deg);
  }
  &.d-arrow-right {
    transform: rotate(-90deg);
  }
  &.d-arrow-down {
    transform: rotate(0deg);
  }
  &.d-arrow-left {
    transform: rotate(90deg);
  }
}

// 交叉
.d-cross-icon {
  position: relative;
  width: 12px;
  height: 12px;
  font-style: normal;
  transition: all .3s;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: rotate(45deg);
  }
}

// 三角
.d-caret {
  .sys-caret();
}
.d-caret-top {
  .sys-caret-top();
}
.d-caret-right {
  .sys-caret-right();
}
.d-caret-left {
  .sys-caret-left();
}