$artist-dimension: 22vw;

.artist-detail-component {
  max-width: $container-large;
  background-color: $gray-light;
  min-height: calc(100vh - #{$nav-height});
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  box-shadow: 0px 0px 6px 1px rgba(99, 99, 99, 0.12);
  padding: 20px;
  padding-bottom: 52px;
  .artist-info {
    width: $artist-dimension;
    margin-right: 20px;
    .artist-art-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      width: $artist-dimension;
      height: $artist-dimension;
      box-shadow: $box-shadow-primary;
      .artist-art {
        width: $artist-dimension;
        height: $artist-dimension;
      }
      .artist-art-fader {
        width: $artist-dimension;
        height: $artist-dimension;
        background: linear-gradient(transparent, rgb(0, 0, 0) 100%);
        position: absolute;
        top: 0;
      }
      h1 {
        text-align: center;
        font-weight: bold;
        font-size: 2.5rem;
        letter-spacing: 1px;
        margin-bottom: 20px;
        position: absolute;
        bottom: 0;
        color: white;
      }
    }
    .artist-info-box {
      padding: 10px 0px;
      padding: 0px 5px;
      .artist-genres {
        margin: 10px 0px;
        flex-wrap: wrap;
        display: flex;
        .genre {
          background-color: $brand-secondary;
          color: white;
          padding: 3px 10px;
          border-radius: 50px;
          margin: 3px;
          box-shadow: $box-shadow-small;
          letter-spacing: 1px;
          font-size: 13px;
          white-space: nowrap;
        }
      }
      .artist-followers {
        font-size: 14px;
        margin-bottom: 10px;
        span {
          font-size: 17px;
          margin-right: 4px;
          font-weight: bold;
          letter-spacing: 1px;
          color: $gray-lightdark;
        }
      }
      .artist-popularity {
        font-size: 14px;
        span {
          font-size: 17px;
          margin-right: 4px;
          font-weight: bold;
          letter-spacing: 1px;
          color: $gray-lightdark;
        }
      }
    }
    .artist-related {
      margin-top: 4rem;
      padding: 0px 5px;
      h2 {
        text-align: center;
        font-size: 1.4rem;
        margin-bottom: 5px;
      }
      .related-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .artist-related-solo {
          margin-bottom: 10px;
          width: 33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            margin: 5px;
            cursor: pointer;
            box-shadow: $box-shadow-primary;
          }
          p {
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.8rem;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .artist-albums {
    width: 30%;
    h2 {
      text-align: center;
      font-size: 1.8rem;
    }
    .album-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .artist-album {
        margin-bottom: 20px;
        width: 35%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          height: 70px;
          width: 70px;
          border-radius: 50%;
          margin: 5px;
          cursor: pointer;
          box-shadow: $box-shadow-primary;
        }
        p {
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.8rem;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
  .artist-top-tracks {
    width: 40%;
    h2 {
      text-align: center;
      font-size: 1.8rem;
    }
  }
}
