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


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

$small-devices: 576px;
$medium-devices: 768px;
$large-devices: 992px;

.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;
    }
  }

  #dynamic_view {
    font-size: 1.1em;

    overflow-wrap: break-word;

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

  #search_form {
    .search-form-container {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
      "action-bar action-bar"
      "search-bar search-bar"
      "radio-department radio-department"
      "radio-credit-type radio-semester";
    }

    .action-bar {
      grid-area: action-bar;
      margin-bottom: 10px;
    }

    .search-bar {
      grid-area: search-bar;
      display: grid;
      grid-template-columns: auto 200px;
      grid-template-rows: auto;
      grid-template-areas: "search-bar-input search-bar-button";

      @media screen and (max-width: $medium-devices) {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        grid-template-areas: "search-bar-input search-bar-button";
      }

      @media screen and (max-width: $small-devices) {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "search-bar-input";

        .search-bar-button {
          display: none;
        }
      }

      .search-bar-input {
        grid-area: search-bar-input;
        background: $pedagogy-light-blue;
      }

      .search-bar-button {
        grid-area: search-bar-button;
        background: $pedagogy-orange;
        color: white;
        font-weight: bold;
        margin-left: 20px;
      }
    }

    .radio-department {
      grid-area: radio-department;
    }

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

    .radio-semester {
      grid-area: radio-semester;
    }

    .radio-guide input[type="radio"],
    input[type="checkbox"] {
      display: none;
    }
    .radio-guide {
      margin-top: 10px;
      color: white;
    }
    .radio-guide label {
      display: inline-block;
      background-color: $pedagogy-blue;
      padding: 10px 20px;
      font-family: Arial, sans-serif;
      font-size: 16px;
      border-radius: 4px;
    }
    .radio-guide input[type="radio"]:checked + label {
      background-color: $pedagogy-orange;
    }
    .radio-guide input[type="checkbox"]:checked + label {
      background-color: $pedagogy-orange;
    }
    .radio-guide label:hover {
      background-color: $pedagogy-hover-blue;
    }
  }

  #uv_detail {
    color: #062f38;

    .uv-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";
        }
      }

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

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

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

      .ui-accordion-header {
        background-color: $pedagogy-orange;
        color: $pedagogy-white-text;
        clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);

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

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

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

      input[type="submit"] {
        float: right;
      }
    }

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

      @media screen and (max-width: $large-devices) {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
        grid-template-areas:
        "grade grade-stars"
        "uv-infos uv-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;
    }

    .uv-infos {
      grid-area: uv-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;
        }

        .actions {
          float: right;
        }
      }

      .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;
          }

          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;
            }
          }
        }
      }
    }
  }
}