@use '../global/index' as global;
@use '@material/theme' as color;

a {
  color: global.$primary;
}

.mdc-theme--text-primary-on-dark {
  a {
    color: #ce93d8;
  }
}

.balmui-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.balmui-test .balmui-container {
  display: block;
  min-height: auto;
}

.balmui-head {
  .github {
    line-height: 1; // fix(ie11): css bug

    & > span {
      display: none;
    }
  }
}

.top-app-toolbar {
  display: flex;
  align-items: center;

  .pro {
    display: inline-block;
    width: 48px;
    text-align: center;
    color: white;
  }
}

.global-message-banner {
  position: fixed;
  z-index: 3;
  top: global.$topAppBar-row-height;

  .mdc-banner__graphic {
    padding: 8px 0;
  }

  a {
    font-weight: bold;
  }
}

.balmui-body {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  max-width: 100%;
}

.balmui-drawer-container {
  min-width: global.$nav-width;

  &.balmui-drawer--mobile {
    min-width: auto;
    .balmui-menu {
      z-index: 9; // NOTE: > snackbar
    }
  }
}

.balmui-menu {
  position: fixed;
  z-index: 2; // NOTE: < banner
  width: global.$nav-width;

  .mdc-drawer__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .balmui-version {
    font-weight: normal;
    .version {
      color: color.$orange-900;
    }
  }
}

.balmui-content {
  position: relative;
  display: block;
  width: 100%;
}

.catalog-list {
  .mdc-deprecated-list-group__subheader {
    font-size: 18px;
  }

  .no-icon {
    padding-left: 28px;
  }

  .plus,
  .next {
    margin-left: 5px;
  }
}

.catalog-list-icon {
  width: 24px;
  height: 24px;
  margin: 0 24px 0 12px;
  background-repeat: no-repeat;
  background-size: 100%;
}

@media (min-width: global.$MIN_WIDTH) {
  .balmui-content {
    width: calc(100% - #{global.$nav-width});
  }

  #balmui-menu {
    display: none;
  }
}

@media (max-width: global.$mobile-breakpoint) {
  .global-message-banner {
    top: global.$topAppBar-mobile-row-height;

    .mdc-banner__content {
      width: auto;
    }

    .mdc-banner__text {
      margin-right: 24px;
    }
  }
}
