#app.navbar {
  --navigationBarHeight: 38px;
}

#app.twopanel {
  --chromeHeight1: 46px;
  --chromeHeight2: 90px;
  --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));

  .modular-fs .app-drawer .lyric-footer {
    bottom: var(--chromeHeight2);
  }

  .app-chrome {

    &:not(.chrome-bottom) {
      .app-chrome--center {
        flex: 1;

        .top-nav-group {
          background   : #1e1e1e99;
          border       : 1px solid lighten(@baseColor, 8);
          border-radius: 12px;
          display      : flex;
          height       : 32px;

          .app-sidebar-item {
            background-color: #1e1e1e00;
            border-radius   : 10px !important;
            border          : 0px;
            min-width       : 120px;
            padding         : 6px;
            justify-content : center;
            align-items     : center;
            margin          : 0px;
            height          : 100%;
            position        : relative;

            &:before {
              --dist          : 1px;
              content         : '';
              position        : absolute;
              top             : var(--dist);
              left            : var(--dist);
              right           : var(--dist);
              bottom          : var(--dist);
              background-color: #fff;
              opacity         : 0;
              border-radius   : 10px;
              transform       : scale(0.5);
              transition      : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
            }

            &:after {
              display: none;
            }

            &:hover {
              background-color: transparent;

              &:before {
                transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
                opacity   : .1;
                transform : scale(1);
              }
            }

            &.active {
              background-color: transparent;

              &:before {
                opacity  : .2;
                transform: scale(1);
              }
            }

            &.md-btn-primary {
              box-shadow      : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
              background-color: lighten(@baseColor, @colorMixRate * 5);
              z-index         : 1;
            }
          }
        }
      }
    }

    .app-mainmenu {
      width : 30px;
      height: 30px;
    }

    .search-input {
      width: 180px;
    }

    height: var(--chromeHeight1);

    &.chrome-bottom {
      background        : var(--color2);
      -webkit-app-region: no-drag;
      height            : var(--chromeHeight2);
      box-shadow        : 0px -2px 6px rgb(20 20 20 / 12%),
        0px -1px 0px 0px rgb(200 200 200 / 12%);
      z-index: 4;

      .app-chrome-playback-duration-bottom {
        width: 100%;

        .col {
          display: flex;
        }

        .col-sm-auto {
          width          : 4em;
          display        : flex;
          justify-content: center;
          align-items    : center;
          font-size      : 0.8em;
        }

        input[type=range] {
          appearance      : none;
          width           : 100%;
          height          : 5px;
          background-color: rgb(200 200 200 / 10%);
          border-radius   : 6px;
          box-shadow      : 0px 0px 0px 1px rgba(0 0 0 / 10%);
          align-self      : center;

          &::-webkit-slider-thumb {
            opacity           : 0;
            transform         : scale(1);
            -webkit-appearance: none;
            appearance        : none;
            width             : 16px;
            height            : 16px;
            border-radius     : 100%;
            background        : var(--keyColor);
            cursor            : default;
            transition        : opacity .10s var(--appleEase), transform .10s var(--appleEase);
          }

          &:hover {
            &::-webkit-slider-thumb {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  .app-sidebar-footer--controls {
    display: none !important;
  }

  .app-chrome.chrome-bottom {
    .app-playback-controls .actions {
      align-self: center;
    }

    -webkit-app-region: no-drag;

    .playback-button.play,
    .playback-button.pause,
    .playback-button.stop {
      width        : 42px;
      height       : 42px;
      border-radius: 50%;
      margin       : 6px;
    }

    .app-chrome--center {
      display       : flex;
      flex-direction: column;

      .app-chrome-playback-controls {
        display         : flex;
        z-index         : 1;
        // margin-bottom: 12px;
      }

      .app-chrome-playback-duration {
        position          : relative;
        width             : 80%;
        -webkit-app-region: no-drag;
        height            : 16px;

        .song-progress {
          @bgColor  : transparent;
          height    : 16px;
          position  : absolute;
          bottom    : 4px;
          left      : 0px;
          right     : 4px;
          background: @bgColor;
          z-index   : 0;


          .song-duration {
            display: flex;
          }

          .song-duration p {
            font-weight: 400;
            font-size  : 10px;
            height     : 1.2em;
            line-height: 1.3em;
            overflow   : hidden;
            margin     : 0 0 0 0.25em;
          }

          &:hover {
            >input[type=range] {
              &::-webkit-slider-thumb {
                opacity  : 1;
                transform: scale(1);
                z-index  : 1;
              }
            }
          }

          input[type=range] {
            appearance      : none;
            width           : 100%;
            height          : 4px;
            background-color: rgb(200 200 200 / 10%);
            border-radius   : 2px;

            &::-webkit-slider-thumb {
              opacity           : 0;
              transform         : scale(0.5);
              -webkit-appearance: none;
              appearance        : none;
              width             : 12px;
              height            : 12px;
              border-radius     : 100%;
              background        : var(--keyColor);
              cursor            : default;
              transition        : opacity .10s var(--appleEase), transform .10s var(--appleEase);
            }
          }
        }
      }

    }

    .app-chrome--left {
      width             : 30%;
      justify-content   : flex-start;
      align-items       : flex-start;
      -webkit-app-region: no-drag !important;

      .playback-controls {
        -webkit-app-region: no-drag !important;

        .artwork {
          --offset      : 20px;
          --marginOffset: 2;
          --size        : calc(var(--chromeHeight2) - var(--offset));
          width         : var(--size);
          height        : var(--size);
          margin        : 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));

          .mediaitem-artwork,
          img {
            border-radius: calc(var(--mediaItemRadius) / 2);
          }
        }

        .playback-info {
          align-items: flex-start;
          margin     : 6px;

          .song-name {
            text-align        : left;
            font-size         : 0.98em;
            font-weight       : 500;
            width             : 100%;
            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
          }

          .song-artist,
          .song-album {
            font-size: 0.75em;
            opacity  : 0.8;
            cursor   : pointer;

            &:hover {
              text-decoration: underline;
            }
          }

          .audio-type {
            margin: 0px;
          }

          .song-artist-album-content {
            text-align: left;
            font-size : 12px;
          }
        }


        width    : 100%;
        height   : 100%;
        max-width: 100%;
        border   : 0px;
      }

      flex: 0 0 auto;
    }

    .app-chrome--right {
      width        : 30%;
      flex         : 0 0 auto;
      padding-right: 8px;
    }
  }

  .collection-page {
    .top-fab {
      bottom: 96px;
    }
  }
}


// screen width is less than 768px
@media (max-width: 1100px) {
  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
    flex: unset;
  }

  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
    min-width: 110px;
    font-size: 0em;

    .sidebar-icon {
      margin: 0px;
    }
  }
}

@media (max-width: 1000px) {
  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
    flex: unset;
  }

  #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
    min-width: 60px;
    font-size: 0em;

    .sidebar-icon {
      margin: 0px;
    }
  }
}