@import '@/components/HoverBox/HoverBox.scss';

.dictItemHead {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 20px;
  padding-right: 2px;
  border-top: 1px var(--color-divider) dashed;
  // sticky header to cover content
  background: var(--color-background);
}

.dictItemHead-Logo {
  width: 20px;
  height: 20px;
  margin-top: -1px;
  user-select: none;
}

.dictItemHead-Title {
  margin: 0;
  padding: 0 3px;
  line-height: 20px;
  font-size: 12px;
  font-weight: normal;

  a {
    color: var(--color-font);
    text-decoration: none;
  }
}

.dictItemHead-Menus_Btn {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  font-size: 0;
  border: none;
  border-radius: 3px;
  outline: none;
  background-color: transparent;
  opacity: 0.7;
  transition: background-color 0.4s;
  cursor: pointer;

  svg {
    fill: var(--color-font);
  }

  &:hover,
  &:focus,
  &:active {
    background-color: var(--color-divider);
  }

  @include isDarkMode {
    &:hover,
    &:focus,
    &:active {
      background-color: #2d3338;
    }
  }
}

.dictItemHead-EmptyArea {
  flex: 1;
  align-self: stretch;
}

.dictItemHead-FoldArrowBtn {
  width: 20px - 1px;
  height: 20px - 1px;
  overflow: hidden;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;

  &:hover {
    outline: none;
  }
}

.dictItemHead-FoldArrow {
  box-sizing: border-box;
  fill: var(--color-font);
  width: 18px;
  height: 18px;
  padding: 3px;
  transform-origin: center;

  @include isAnimate {
    transition: transform 400ms;
  }

  @include atRoot(".isUnfold") {
    transform: rotate(-90deg);
  }
}

.dictItemHead-Loader {
  display: flex;
  align-items: center;
  width: 54px;
  height: 20px;
}

.dictItemHead-Loader > div {
  width: 8px;
  height: 8px;
  margin: 2px;
  background: #f9690e;
  border-radius: 100%;

  @include isAnimate {
    animation: dictItemHead-Loader 1.5s infinite ease-in-out;

    $dictItemHead-LoaderNum: 5;
    @for $i from 1 through $dictItemHead-LoaderNum {
      &:nth-child(#{$dictItemHead-LoaderNum + 1 - $i}) {
        animation-delay: -0.1s * ($i - 1);
      }
    }
  }
}

@keyframes dictItemHead-Loader {
  0%,
  30%,
  70%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}
