#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;
            white-space: nowrap;

            ._svg-icon {
              flex: 0 0 auto;
            }

            &: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: 0.1;
                transform: scale(1);
              }
            }

            &.active {
              background-color: transparent;

              &:before {
                opacity: 0.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 0.1s var(--appleEase), transform 0.1s 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 0.1s var(--appleEase), transform 0.1s 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: 8px;

          .song-name {
            text-align: left;
            font-size: 0.8em;
            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;
            white-space: nowrap;
            max-width: 360px;
            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
            width: 100%;

            &: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;
    .sidebar-item-text {
      display: none;
    }

    .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;
    .sidebar-item-text {
      display: none;
    }

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