@import "../../../themes/default";

:global {
  .app-player {
    background-color: #000;
  }

  .app-player-container {
    display: flex;
  }

  .app-player-content {
    position: relative;
    width: 70%;
  }

  .app-player-related {
    position: relative;
    width: calc(30% - 24px);
    padding-top: 12px;
    padding-left: 24px;

    .app-scroll-list-content {
      height: calc(100% - 36px);

      .app-list-item {
        color: @color-white-65;
      }

      .app-list-item-active {
        color: @color-white
      }
    }
  }

  .app-media-container {
    .app-player-content {
      width: 70%;
      margin: 0 auto;
    }
  }

  .app-layout-mobile {
    .app-player {
      margin-left: -@padding-base;
      margin-right: -@padding-base;
    }

    .app-player-container {
      display: block;
    }

    .app-player-content, .app-player-related {
      width: 100% !important;
    }

    .app-player-related {
      padding-top: 0;
      padding-left: @padding-base;
      padding-right: @padding-base;
      height: calc(~"100vh - 60px" - @mobile-player-height);
    }

    @media screen and (orientation: portrait) {
      .app-media-container {
        .app-player-content {
          position: fixed;
          background-color: #000;
          z-index: 101;
        }

        .app-media-info, .app-player-related {
          padding-top: calc(~"56.25% + 36px") !important;
        }

        .app-player-related {
          padding-top: 56.25% !important;
        }
      }
    }
  }

  .app-layout-mobile.app-layout-visible {
    .app-content {
      margin-top: -60px;
    }
  }
}