@import "core/static/core/devices";
@import "core/static/core/colors";


$pedagogy-blue: #1bb9ea;
$pedagogy-orange: #ea7900;
$pedagogy-hover-blue: #0e97ce;
$pedagogy-light-blue: #caf0ff;
$pedagogy-white-text: #f0f0f0;

.pedagogy {
  &.star-not-checked {
    color: #f7f7f7;
    margin-bottom: 0;
    margin-top: 0;
  }

  &.star-checked {
    color: $pedagogy-orange;
    margin-bottom: 0;
    margin-top: 0;
  }

  &.grade-without-star {
    display: none;
  }

  @media screen and (max-width: $large-devices) {
    &.star-not-checked {
      margin-left: 5px;
      margin-right: 5px;
    }

    &.star-checked {
      margin-left: 5px;
      margin-right: 5px;
    }
  }

  @media screen and (max-width: $small-devices) {
    &.grade-without-star {
      display: block;
    }

    &.grade-with-star {
      display: none;
    }
  }

  #ue-list {
    font-size: 1.1em;

    overflow-wrap: break-word;

    .closed td.title {
      color: lighten($black-color, 10%);
      font-style: italic;
    }

    td {
      text-align: center;
      border: none;
    }
  }

  #search_form {

    .radio-guide fieldset {
      input[type="checkbox"] {
        display: none;
      }

      margin-top: 10px;
      margin-bottom: 0;
      color: white;

      label {
        padding: 10px 20px;
      }

      input[type="checkbox"]:checked+label {
        background-color: $pedagogy-orange;
        @include shadow;
      }
    }
  }

  #ue_detail {
    color: #062f38;

    .ue-quick-info-container {
      display: grid;
      grid-template-columns: 20% 20% 20% 20% auto;
      grid-template-rows: auto auto;
      grid-template-areas:
      "hours-cm hours-td hours-tp hours-te hours-the"
      "department credit-type semester . .";
    }

    .department {
      grid-area: department;
    }

    .credit-type {
      grid-area: credit-type;
    }

    .semester {
      grid-area: semester;
    }

    .hours-cm {
      grid-area: hours-cm;
    }

    .hours-td {
      grid-area: hours-td;
    }

    .hours-tp {
      grid-area: hours-tp;
    }

    .hours-te {
      grid-area: hours-te;
    }

    .hours-the {
      grid-area: hours-the;
    }

    .leave-comment-not-allowed {
      p {
        text-align: center;
        color: red;
      }
    }

    .leave-comment {
      .leave-comment-grid-container {
        display: grid;
        grid-template-columns: 270px auto;
        grid-template-rows: 100%;
        grid-template-areas: "stars comment";

        @media screen and (max-width: $large-devices) {
          grid-template-columns: 100%;
          grid-template-rows: auto auto;
          grid-template-areas:
          "stars"
          "comment";
        }

      }

      .form-stars {
        grid-area: stars;
      }

      .form-comment {
        grid-area: comment;
      }

      .ui-accordion-header-icon {
        color: $pedagogy-white-text;
        margin-right: 10px;
      }

      .input-stars {
        margin-top: 20px;
      }
    }

    .ue-details-container {
      display: grid;
      grid-template-columns: 150px 130px auto;
      grid-template-rows: 156px 1fr;
      grid-template-areas:
      "grade grade-stars ue-infos"
      ". . ue-infos";

      @media screen and (max-width: $large-devices) {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
        grid-template-areas:
        "grade grade-stars"
        "ue-infos ue-infos";
      }
    }

    .grade {
      grid-area: grade;
      color: $pedagogy-white-text;
      background-color: $pedagogy-blue;
      padding-right: 10px;

      >p {
        text-align: right;
        font-weight: bold;
      }
    }

    .grade-stars {
      grid-area: grade-stars;
      color: $pedagogy-white-text;
      background-color: $pedagogy-blue;
      font-weight: bold;
    }

    .ue-infos {
      grid-area: ue-infos;
      padding-left: 10px;
    }

    .comment-container {
      display: grid;
      grid-template-columns: 300px auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
      "grade-block comment"
      "grade-block info"
      "comment-end-bar comment-end-bar";
      margin-bottom: 30px;
      margin-top: 10px;

      @media screen and (max-width: $large-devices) {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
        "grade-block"
        "comment"
        "info"
        "comment-end-bar";
      }

      .grade-block {
        grid-area: grade-block;
        width: 300px;

        display: grid;
        grid-template-columns: 150px 150px;
        grid-template-rows: 156px auto;
        grid-template-areas:
        "grade-type grade-stars"
        "grade-extension grade-extension";
        grid-gap: 15px;

        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
        align-items: start;

        background-color: $pedagogy-blue;

        @media screen and (max-width: $large-devices) {
          grid-template-columns: 50% auto;
          grid-template-rows: auto;
          grid-template-areas: "grade-type grade-stars";
          width: auto;
          clip-path: none;
          align-content: space-evenly;
          align-items: end;
        }

        .grade-extension {
          grid-area: grade-extension;
          background-color: $pedagogy-blue;
        }

        .grade-type {
          grid-area: grade-type;

          >p {
            color: $pedagogy-white-text;
            font-weight: bold;
            text-align: right;
          }
        }

        .grade-stars {
          grid-area: grade-stars;
        }
      }

      .comment {
        grid-area: comment;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        grid-template-areas:
        "anchor"
        "markdown";

        @media screen and (max-width: $large-devices) {
          border-left: solid;
          border-right: solid;
          border-color: $pedagogy-blue;
        }

        .anchor {
          grid-area: anchor;
          text-align: right;
          margin-right: 15px;
        }

        .markdown {
          grid-area: markdown;

          min-height: 139px;
          margin-top: 0;
          margin-right: 0;
          padding: 10px;
          text-align: justify;
          overflow: auto;
        }
      }

      .info {
        grid-area: info;
        padding-bottom: 10px;

        @media screen and (max-width: $large-devices) {
          border-left: solid;
          border-right: solid;
          border-color: $pedagogy-blue;
        }

        .status-reported {
          color: red;
          float: left;
          padding-left: 10px;
        }

        .action {
          float: right;
          margin-top: 0;
        }
      }

      .comment-end-bar {
        grid-area: comment-end-bar;

        display: grid;
        grid-template-columns: 33% auto auto;
        grid-template-rows: 2.5em;
        grid-template-areas: "author date report";

        background-color: $pedagogy-blue;
        margin-top: -1px;

        @media screen and (max-width: $large-devices) {
          grid-template-columns: auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
          "report"
          "date"
          "author";
          margin-top: 0;
          text-align: center;
        }

        .author {
          grid-area: author;

          padding-top: 6px;
          padding-left: 20px;

          background-color: $pedagogy-orange;
          clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);

          @media screen and (max-width: $large-devices) {
            clip-path: none;
            padding: 0;
            padding-bottom: 7px;
          }

          a {
            color: $pedagogy-white-text;
            font-weight: bold;
          }

          a:hover {
            color: $pedagogy-hover-blue;
          }
        }

        .date {
          grid-area: date;
          color: $pedagogy-white-text;

          @media screen and (max-width: $large-devices) {
            padding-bottom: 7px;
          }
        }

        .report {
          grid-area: report;
          justify-self: right;
          padding-right: 30px;
          padding-left: 30px;

          a {
            color: $pedagogy-white-text;
            cursor: pointer;
          }

          a:hover {
            color: $pedagogy-hover-blue;
          }

          @media screen and (max-width: $large-devices) {
            text-align: center;
            justify-self: inherit;
            padding-bottom: 7px;
            background-color: $white-color;

            border-left: solid;
            border-right: solid;
            border-color: $pedagogy-blue;

            a {
              color: $black-color;
            }
          }
        }
      }
    }
  }
}

details.accordion summary {

  background: $pedagogy-orange !important;
  color: $pedagogy-white-text !important;
  clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);

  @media screen and (max-width: $large-devices) {
    clip-path: none;
  }
}

details.accordion>.accordion-content {
  background-color: $white-color;
  border-color: $pedagogy-orange;
  border-right: none;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}