@import "var.scss";
@import "global.scss";

.aside-fade-enter-active {
  transition: all 0.3s ease;
}

.aside-fade-leave-active {
  transition: all 0.2s ease;
}

.aside-fade-enter,
.aside-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

.yin-current-play {
  font-size: 14px;
  width: $current-play;
  position: fixed;
  right: 0;
  top: $header-height;
  bottom: 0;
  padding-bottom: $footer-height;
  z-index: 99;
  background-color: $color-white;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.title,
.control,
.menus li {
  padding-left: 20px;
  box-sizing: border-box;
}

.title {
  margin: 10px 0;
}

.control {
  margin: 3px 0;
  color: $color-grey;
}

.menus {
  width: 100%;
  height: calc(100% - 19px);
  cursor: pointer;
  z-index: 100;
  overflow: scroll;
  white-space: nowrap;
  li {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    &:hover {
      background-color: $color-light-grey;
    }
  }
}

.is-play {
  color: $color-black;
  font-weight: bold;
}
