.songlist {
  width: 100%;
  font-size: 16px;
  background-color: $content2;
  color: $primarytext;
  tr {
    height: 30px;
    line-height: 30px;
    border-top: 1px solid $dividers;
  }

  th,td {
    padding-left: 5px;
  }

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

  thead tr {
    padding: 5px 0;
    color: rgba(0, 0, 0, .54);
  }

  tbody {
    tr {
      transition: all ease 0.5s;
    }
    tr:hover {
      background-color: $grey-300;
    }
  }
}
.songlist-table__index {
  width: 5%;
  padding-right: 10px;
  text-align: right;
}

.songlist-table__name {
  width: 30%;
  cursor: pointer;
  &:hover {
    color: black;
  }
}

.songlist-table__button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .i {
    fill: $icon;
    height: 26px;
    width: 26px;
    /* FIXME:  parent can't height 100% */
    transform: translateY(6px);
  }
  * {
    cursor: pointer;
  }
}

.songlist-table__artists {
  width: 20%;
}

.songlist-table__album {
  width: 20%;
}

.songlist-table__duration {
  width: 5%;
}

.songlist-table__hot {
  width: 15%;
}

.songlist-table__hotbar-wrapper {
  height: 10px;
  width: 80%;
  margin: auto;
  border-radius: 5px;
  background-color: $red-300;
  overflow: hidden;
}

.songlist-table__hotbar {
  background-color: $red-700;
  border-radius: 5px;
  height: 100%;
}

.songlist-table {
  text-align: left; 
  width: 100%;
}
