@import 'assets/material-theme.scss';

#plans-container {
  height: calc(100vh - 112px);

  &.hide-navigation-bar {
    height: calc(100vh - 64px);
  }
}

mat-sidenav {
  width: 340px;
}

#menu-toggle-btn {
  position: absolute;
  right: 0px;
  top: 20px;
  border-radius: 50% 0 0 50%;
  padding: 8px;
  background-color: #f0f0f0;
}

.degree-plans-form-field {
  width: 300px;
}

.degree-plan-selector {
  height: 27px;

  mat-select-trigger {
    height: 24px;
    display: inline-block;
    position: relative;
    top: 1px;

    .plan-name {
      position: relative;
      top: 1px;
      display: inline-block;
      vertical-align: top;
      height: 24px;
      line-height: 24px;
    }
  }

  .primary-star {
    margin-right: 12px;
  }
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px;
  }
}

/deep/.dialog-fullscreen {
  max-width: none !important;
  max-height: none !important;

  width: 100% !important;
  height: 100% !important;
  .mat-dialog-content {
    max-height: 85vh !important;
  }
}

.version-number {
  font-family: mat-font-family($config);
  font-size: 12px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  #menu-toggle-btn {
    position: relative;
    top: 0;
    right: 0;
    border-radius: 50%;
    padding: 12px;
  }
}

// Course search
.search-input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#loading-plan-progress {
  position: absolute;
  z-index: 1000;
}

#degree-plan-wrapper.isLoadingPlan {
  overflow: hidden;

  #year-wrapper {
    opacity: 0.5;
  }

  #year-mask {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 9000;
  }
}

#year-mask {
  display: none;
}

#plan-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.expand-collapse {
  color: map-get($uw-primary, 500);
}

@media screen and (max-width: 960px) {
  #plan-controls {
    display: block;
    text-align: right;
  }

  #grades-toggle-wrapper {
    display: none;
  }
}