.course-config {
  $component-name: ".course-config";
  $course-config-status-size: -3;
  $course-config-preview-padding: -2;
  $search-filter-horizontal-padding: -4;

  display: grid;
  grid-gap: spacing(0);

  @include breakpoint("wide") {
    grid-template-columns: min-content auto;
  }

  &__header {
    @include set-font(2, "single", $weight: "bold");
  }

  &__filters {

    & .form__field:not(.form__field--horizontal) label,
    & .form fieldset legend .fieldset__legend-wrapper {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    }

    @include breakpoint("wide") {
      padding-right: spacing(0);
      border-right: $width-border solid color("border");
    }
  }

  &__search {
    margin-bottom: spacing(-1);

    & .search-filter {
      max-width: none;

      &__item {
        padding: 0 spacing($search-filter-horizontal-padding, $add: line-height("multiple", $include-calc: false)) 0 spacing($search-filter-horizontal-padding);
      }
    }
  }

  &__content {
    .notification {
      margin-top: spacing(-2);
    }
  }

  &__table {

    &__row {
      &:hover {
        background-color: color("background-hover");

        #{$component-name}__table__checkbox {
          input[type="checkbox"] {
            opacity: 1;
          }
        }
      }

      &__course-name {
        position: relative;
      }

      &__merged-list {
        max-width: none; //overwrite default for ul
        color: color("foreground-secondary");
        margin-bottom: 0;
        margin-top: spacing(-5);

        &--names {
          li {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    &__checkbox {
      position: absolute;
      top: 0;

      input[type="checkbox"] {
        opacity: 0;
        margin-top: spacing($button-padding-vertical-small, $times: -1);
        margin-bottom: spacing($button-padding-vertical-small, $times: -1);
        border: $width-border solid color("utility-attention");

        &:checked,
        &:focus {
          opacity: 1;
        }

        &:checked:not([disabled]) {
          background-color: color("utility-attention");

          &::before {
            background-color: color("utility-foreground");
          }

          &:hover {
            background-color: color("utility-attention-hover");
            border-color: color("utility-attention-hover");
          }
        }

        //this is NOT redudant with the :not([disabled]) above, since we don't want any hover style on a disabled checkbox
        &[disabled] {
          background-color: color("interactive");

          &:checked {
            background-color: color("utility-attention");
          }

          &::before {
            background-color: color("utility-foreground");
          }
        }
      }
    }

    &__course-name {
      max-width: 1px;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .button {
      margin-top: spacing($button-padding-vertical-small, $times: -1);
      margin-bottom: spacing($button-padding-vertical-small, $times: -1);

      &:hover {
        background: color("background");
      }

      &:active {
        background: color("background");
      }
    }
  }


  &-status {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: baseline;

    &::before,
    &::after {
      display: block;
      flex: 0 0 auto;
      width: spacing($course-config-status-size);
      height: spacing($course-config-status-size);
      border-radius: 50%;
      background-color: color("foreground");
    }

    &::before {
      content: "";
      margin-right: spacing(-5);
    }

    &::after {
      margin-left: spacing(-5);
    }

    #{$component-name}__table & {

      &::before,
      &::after {
        margin-left: spacing($forms-margin-label, $times: 2, $add: line-height("single", $include-calc: false), $subtract: spacing($course-config-status-size), $divideby: 2);
        margin-right: spacing($forms-margin-label, $times: 2, $add: "#{line-height("single", $include-calc: false)} + #{spacing(-4, $times: 2)}", $subtract: spacing($course-config-status-size), $divideby: 2)
      }
    }

    &--append {
      &::before {
        content: none;
      }

      &::after {
        content: "";
      }
    }

    &--configured {
      &::before,
      &::after {
        background-color: color("utility-confirm");
      }
    }

    &--notification {
      display: flex;
      justify-content: space-between;
      .notification {
        @include set-font(-1, "single");
      }
    }

    &--previous-config {
      &::before,
      &::after {
        background-color: color("utility-attention");
      }
    }

    &--no-config {
      &::before,
      &::after {
        background-color: color("border");
      }
    }

    &--merged {
      &::before,
      &::after {
        background-color: transparent;
      }
    }

    &--config-not-needed {
      &::before,
      &::after {
        background-color: color("utility-warning");
      }
    }    

    .visually-disabled & {
      &::before,
      &::after {
        background-color: color("background-secondary");
      }
    }
  }

  label#{$component-name+"-status"} {
    flex-direction: row;
    align-items: baseline;
  }

  &-setting {
    @include set-font(-1, "single");
    color: color("foreground-secondary");
    white-space: nowrap;

    //hack for making the smaller font size of this appear to be vertically centered with first line of text in other columns
    display: inline-block;
    margin-top: .17em;

    &--legend {
      @include set-font(0, "single");
      color: color("foreground");
      white-space: normal;
    }

    &__item {

      &+& {
        margin-left: spacing(-5);
      }

      @include icon-style {
        margin-right: spacing(-5);
        order: -2;
      }

      @include icon-style($position: "after") {
        margin-right: spacing(-5);
        order: -1;
      }

      &--common {
        @include set-icon("lms-course-common", $include-pseudo: "before");
      }

      &--sections {
        @include set-icon("lms-course-sections", $include-pseudo: "before");
      }

      &--additional {
        @include set-icon("lms-course-additional", $include-pseudo: "before");
      }

      $merged-margin-left: .15em;
      &--merged {
        display: inline-flex;
        margin-left: $merged-margin-left;
        @include set-icon("lms-course-merged", $include-pseudo: "before");
        @include set-icon("lms-course-common", $include-pseudo: "after");
      }

      &--merged-for-legend-use-only {
        @include set-icon("lms-course-merged", $include-pseudo: "before");
      }

      &--merged-with-sections {
        display: inline-flex;
        margin-left: $merged-margin-left;
        @include set-icon("lms-course-merged", $include-pseudo: "before");
        @include set-icon("lms-course-sections", $include-pseudo: "after");
      }

      &--merged-additional-only {
        display: inline-flex;
        margin-left: $merged-margin-left;
        @include set-icon("lms-course-merged", $include-pseudo: "before");
        @include set-icon("lms-course-additional", $include-pseudo: "after");
      }
    }
  }

  &-preview {
    margin-top: spacing(-1);

    &__header {
      display: flex;
      justify-content: space-between;
      margin-bottom: spacing(-5);

      &__title {
        @include set-font(-1, 'single', $weight: 'bold', $transform: 'uppercase');
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    &__content {
      @include content-container;
      border: $width-border solid color('border');
      padding-top: spacing($course-config-preview-padding);

      ul {
        margin: 0;
        padding: 0 spacing($course-config-preview-padding) spacing($course-config-preview-padding) spacing($course-config-preview-padding);
      }

      #{$component-name}-preview__header {
        &__title {
          padding-left: spacing($course-config-preview-padding);
          margin-bottom: 0;
        }

        button {
          margin-right: spacing($course-config-preview-padding);
        }
      }

      &-wrapper {
        display: grid;
        grid-template-columns: 1fr auto auto;

        &--sections {
          border-top: $width-border dashed color('border');
          border-bottom: $width-border dashed color('border');
          margin-bottom: spacing(-1);

          &:last-of-type {
            border-bottom: none;
          }

          #{$component-name}-preview__content {
            border: none;

            &:not(:first-child) {
              border-left: $width-border dashed color('border');
            }
          }
        }

        &--additional {
          grid-gap: spacing(-2);
        }
      }
    }

    &__course {
      &-name {
        @include set-font(0, 'single', $weight: 'bold', $transform: 'none');
        padding: 0 spacing($course-config-preview-padding) spacing(-4) spacing($course-config-preview-padding);

        &--common {
          font-size: font-size(1);
        }
      }

      &-participants {
        max-width: none;

        &__item {
          max-width: $line-width-max;
          @include set-font(0, "single");

          & + & {
            margin-top: spacing(-4);
          }

          @include icon-style {
            background-color: transparent;
            top: 0;
          }

          &--teachers {
            @include set-icon("instructor", $include-pseudo: "before");
          }

          &--students {
            @include set-icon("class", $include-pseudo: "before");
          }

          &--teachers-and-students {
            @include set-icon("instructor-with-class", $include-pseudo: "before");
          }

          &--merged {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: baseline;
            max-width: none;

            @include set-icon("lms-course-merge-with", $include-pseudo: "before");
          }
        }
      }
    }

    &__delete {
      @include set-font(-1, "single");
      color: color("foreground-theme");
      white-space: nowrap;

      &:active {
        color: color("foreground-theme");
        outline: none;
      }
      &:hover {
        color: color("foreground-theme-hover");
        outline: none;
      }

      @include icon-style($position: "after") {
        margin-left: spacing(-5);
        display: inline-block;
        @include set-icon("delete");
      }
    }
  }

  &__merge-form {
    margin-bottom: spacing(-2);

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: spacing(-5);

      &__text {
        margin-right: spacing(-4)
      }

      .button {
        flex: 0 0 auto;
      }
    }

    .form__field {
      position: relative;

      .autosuggest {
        position: initial;

        &__suggestions__list__item {
          .notification {
            margin-top: spacing(-5);
          }
        }
      }
    }


  }

  &-config-not-needed {
    display: flex;
    flex-direction: row-reverse;

    .form__field {
      margin-bottom: 0;
    }
  }  
}