orizens/echoes-player

@import '~src/css/core/global.scss';

@media (min-width: 320px) {
  :host {
    .btn-toggle {
      padding: 1rem;
      font-size: 2rem;
      color: var(--navbar-text-color);

      .update-indicator {
        position: absolute;
        // transform: translateY(-8px);
        top: 13px; /* for pulse animation*/
      }
    }

    .menu-dropdown {
      position: absolute;
      right: 0;
      min-width: 250px;
      z-index: $zindex-navbar-fixed;
      transform-origin: top right;

      &.end-animation {
        top: -35rem;
      }

      &.slideInDown {
        animation: slideInDown 0.5s 1;
        top: 5rem;
        transform-origin: top right;
      }
      &.slideOutDown {
        animation: slideOutDown 0.8s 1 forwards;
        top: 5rem;
        transform-origin: top right;
      }

      .list-group-item icon {
        margin-right: 5px;
      }

      .navbar-action-link {
        display: block;
      }

      .menu-version {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      icon {
        font-size: 2em;
        vertical-align: middle;
      }
    }
    .menu-backdrop {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      height: 100vh;
      width: 100%;
    }
  }
}

.list-group-item.theme-selector {
  /deep/ .btn.active {
    background-color: var(--brand-primary);
    color: var(--brand-inverse-text);
    border: 1px solide var(--brand-primary);
  }
  /deep/ .btn {
    background-color: transparent;
    color: var(--brand-primary);

    &::before {
      content: '';
      height: 1rem;
      width: 1rem;
      display: block;
      background-color: var(--brand-primary);
      position: absolute;
      left: 0;
      top: 1rem;
    }
  }
}