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

body {
  background-color: #ccc;
  margin: 0px;
}

// Disables the input zoom on iOS
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  textarea,
  input {
    font-size: 16px !important;
  }
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.semi-bold {
  font-weight: 700;
}

.btn-primary[disabled] {
  color: rgba(0, 0, 0, 0.26) !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.btn-primary,
.btn-secondary,
.btn-delete {
  min-width: 100px !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  font-size: 14px;
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.btn-primary {
  background-color: #0479a8 !important;
  color: white !important;
}

.btn-secondary {
  color: map-get($uw-primary, 500) !important;
  border: 1px solid #b7b7b7 !important;
  border-radius: 4px !important;
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.btn-link {
  color: map-get($uw-primary, 500) !important;
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.btn-delete {
  background-color: #b5261e;
  color: white;
}

.in-progress-icon {
  color: #457a3b;
}

.problem-icon {
  color: #ef6c00;
}

.cancel-icon {
  color: #6e655f;
}

.error-icon {
  color: map-get($uw-accent, 600);
}

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

.in-progress-icon,
.problem-icon,
.cancel-icon,
.error-icon,
.help-icon,
.not-offered-icon {
  font-size: 24px !important;
  margin-left: 5px;
  &:hover {
    cursor: default;
    opacity: 0.9;
  }
  &:focus {
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.mat-expansion-panel-header.mat-expanded {
  margin: 4px;
}

.mat-select-panel .mat-option:focus,
.mat-option.mat-active {
  outline: 2px solid #5e9ed6;
  outline: -webkit-focus-ring-color auto 5px;
}

.mat-icon,
.mat-icon-button,
.material-icons,
.add-course-button,
.mat-button,
.mat-menu-item,
.mat-primary,
.mat-form-field,
#menu-toggle-btn {
  &:hover {
    opacity: 0.8;
  }
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.cdk-drop-list-dragging {
  position: relative;
  .cdk-drag-placeholder {
    opacity: 0.4;
    min-height: 100% !important;
    height: 100% !important;
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
    border-radius: 5px;
  }
}

.cdk-drag-animating {
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}
.course-list.cdk-drop-list-dragging .course-wrapper:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
}

.no-courses {
  padding: 20px 10px;
}

.list-comma::before {
  content: ', ';
}

.list-comma:first-child::before {
  content: '';
}

/*

	Note: The follow styles need to be in the global styles file
	and they need !important.

	The following styles switch the display of the terms hidden within the
	mat-expansion-panel. By default they are always displaying flex, causing
	the drop zone hitbox to mess up and register terms that are in closed panels.

	The !important is needed to overwrite the default styles applied by the mat-expansion-panel
	and these styles need to be in this file because the mat-expansion-panel's body is a seperate
	component and it's styles are encapsulated and cannot be styled directly from one of our components

*/
.term-container-wrapper {
  display: none !important;
}

.mat-expansion-panel-header {
  font-size: 18px;
  &:focus {
    outline: 2px solid #5e9ed6;
    outline: -webkit-focus-ring-color auto 5px !important;
  }
}

.mat-expanded,
.ng-animating {
  .term-container-wrapper {
    display: flex !important;
  }
}

// Menus styles

.course-item-menu,
.mat-menu-content {
  width: 200px !important;
}
.mat-menu-content {
  margin: 0px 3px;
}

.saved-for-later-list {
  border-bottom: 1px solid #f1f1f1 !important;
}

// Dialogs styles

.mat-dialog-container {
  min-width: 400px;
  padding: 0px !important;
  .dialog-with-toolbar {
    padding: 0 45px 25px 45px;
    margin: 0px;
  }
}

.dialog-toolbar {
  height: 54px !important;
  padding-right: 0px !important;
  .dialog-toolbar-title {
    flex: 1 1 auto;
    font-weight: 400;
  }
  .close-btn {
    min-height: 55px;
    &:focus {
      outline: 2px solid #5e9ed6;
      outline: -webkit-focus-ring-color auto 5px !important;
    }
  }
}

// Media queries

@media screen and (max-width: 800px) {
  .mat-dialog-container {
    min-width: 100%;
  }
}

@media screen and (max-width: 957px) {
  .mat-dialog-container {
    .dialog-with-toolbar {
      padding-top: 20px;
    }
  }
}