bemusic/bemuse

@import '~bemuse/ui/common';

.MusicSelectScene {
  @include main-bg;
  font: 1rem $ui-font;

  &のloading {
    @include centered;
    font-size: 2rem;
    text-align: center;
    color: rgba(black, 0.5);
    text-shadow: 0 2px 0 rgba(white, 0.3);
  }

  &のmain {
    @include full-screen;
  }

  &のunofficialLabel {
    $color: #f4f3b8;
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6em;
    display: inline-block;
    margin-left: 1.5ex;
    background: $color;
    line-height: 1.2;
    padding: 0.3em 0.6em;
    border: 1px solid darken($color, 25%);
    box-shadow: 0 1px 2px rgba(black, 0.2);
    color: darken($color, 64%);
    border-radius: 3px;
    font-weight: normal;
    z-index: 15;
    cursor: pointer;
    &:hover {
      background: lighten($color, 10%);
    }
  }

  &のsearch {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    width: 8em;
    font: 0.4em $ui-font;
    padding: 0.3em;
    border: 1px solid #ddd;
    background: linear-gradient(to bottom, #f5f4f3, #fff);
    border-radius: 1em;
    text-indent: 1ex;
  }

  .SceneHeading {
    z-index: 10;
  }

  .MusicList {
    @include full-screen;
    @include scrolling-y;
    padding: 10rem calc(50vw + 1rem) 3rem 4rem;
  }

  .MusicInfo {
    @include scrolling-y;
    position: absolute;
    top: 0;
    right: 4rem;
    bottom: 0;
    left: calc(50vw + 1rem);
    padding-top: 10rem;
    padding-bottom: 3rem;
  }

  @media (max-width: 1000px) {
    &のmain {
      transform: translateX(0);
      transition: 0.3s transform;
      &.is-in-song {
        transform: translateX(calc(-100vw + 20px));
        @media (min-width: 600px) {
          transform: translateX(-70vw);
        }
      }
    }
    .MusicList {
      padding: 10rem 2rem 1.2rem;
      @media (min-width: 600px) {
        padding-left: 7.5rem;
        padding-right: 7.5rem;
      }
    }
    .MusicInfo {
      right: auto;
      left: 100vw;
      width: calc(100vw - 20px);
      @media (min-width: 600px) {
        width: 70vw;
      }
    }
  }

  &のcustomBms .CustomBMS {
    width: 640px;
    max-width: 95vw;
  }
}