@use "../../colors" as c;
@use "../../mixins" as m;

@use "sass:color";

.dashboard-calendar {
  @include m.dashboard-component;

  .dashboard-calendar-content {
    padding: 0.5em;

    .calendar-controls {
      .calendar-options-control {
        float: left;
        margin: 1em 1em 1em 0;
      }

      .calendar-clear-filters {
        @include m.ilios-link;
        float: left;
        margin-top: 1.5em;
      }

      .calendar-filters {
        clear: both;
        float: left;
        width: 100%;
      }

      .calendar-school-picker {
        float: right;
        margin-right: 5em;

        select {
          @include m.ilios-select;
        }
      }

      .calendar-filter-list {
        border: 1px solid c.$blueMunsell;
        float: left;
        @include m.font-size("small");
        margin-bottom: 1em;
        width: 33%;

        h5 {
          @include m.ilios-heading-h5;
          display: block;
          background-color: c.$culturedGrey;
          border-bottom: 0.5px solid c.$davysGrey;
          padding: 0.25em;
          width: 100%;
        }

        h6 {
          @include m.ilios-heading-h6;
          padding-bottom: 0.25em;
        }

        ul {
          @include m.ilios-list-reset;

          li {
            color: c.$blueMunsell;
            cursor: pointer;
          }
        }

        .filters {
          height: 14em;
          overflow-x: hidden;
          overflow-y: scroll;
          padding-bottom: 1em;
        }

        &.small-filter-list {
          width: 15%;
        }

        &.large-filter-list {
          width: 33%;
        }

        .clickable {
          position: relative;
        }

        .checkbox {
          position: absolute;
        }

        .list-indentation {
          display: inline-block;
          padding-left: 20px;
          width: 100%;
        }
      }
    }

    .filters-list {
      background: c.$culturedGrey;
      clear: both;
      margin-bottom: 1em;
      padding: 5px;

      .filters-header {
        border-bottom: 1px solid c.$davysGrey;
        @include m.font-size("small");
      }

      .filter-tags {
        .filter-tag {
          @include m.ilios-button-reset;
          @include m.font-size("small");
          border-radius: 3px;
          display: inline-block;
          padding: 2px 5px;
        }

        .fa-close {
          color: c.$culturedGrey;
        }

        .tag-session-type {
          background-color: color.adjust(c.$blueMunsell, $lightness: 30%);
        }

        .tag-course-level {
          background-color: color.adjust(c.$blueMunsell, $lightness: 40%);
        }

        .tag-cohort {
          background-color: color.adjust(c.$blueMunsell, $lightness: 50%);
        }

        .tag-course {
          background-color: color.adjust(c.$blueMunsell, $lightness: 60%);
        }

        .tag-term {
          background-color: color.adjust(c.$blueMunsell, $lightness: 40%);
        }

        .filters-clear-filters {
          @include m.ilios-button-reset;
          @include m.font-size("small");
          color: c.$blueMunsell;
        }
      }
    }
  }
}
