@import (reference) url('./../Dropdown.less');

@keyframes AddAnimation {
  65% {
    background: var(--color-yellow2);
  }
}

.AssignmentDeskDashboard {
  --assignment-desk-toolbar-gap: 2;

  &.has-refresh {
    --assignment-desk-toolbar-gap: 4;

    .AssignmentDeskDashboard-refresh {
      display: flex;
    }

    .AssignmentDeskDashboard-refresh,
    .Label.is-updated {
      animation: fade-in 1s ease;
    }
  }

  .Linklist tr {
    padding-bottom: var(--gap-l);
    padding-top: var(--gap-l);
  }

  .AssignmentDeskDashboard-boardView {
    background: var(--color-gray2);
    display: flex;
  }

  .AssignmentDeskDashboard-boardView-column {
    display: flex;
    flex-direction: column;
    width: 25%;
  }

  .AssignmentDeskDashboard-boardView-link {
    min-height: min-content;
    padding: var(--gap-l);
    padding-bottom: var(--gap-m);
  }

  .AssignmentDeskDashboard-boardView-description {
    color: var(--color-gray5);
    font-size: var(--fontSize-s);
    line-height: var(--lineHeight-s);
    margin-bottom: var(--gap-l);
    max-height: calc(var(--lineHeight-s) * 10);
    overflow: hidden;
    padding: 0 var(--gap-l) var(--gap-l);
    text-overflow: unset;
  }

  .AssignmentDeskDashboard-boardView-card {
    background: var(--color-white);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    height: min-content;
    justify-content: space-between;
    margin: var(--gap-m);
    margin-bottom: 0;
  }

  .AssignmentDeskDashboard-boardView-stats {
    background: var(--color-gray1);

    .LinkList {
      td {
        width: 100%;
      }

      td:not(
          .LinkList-image,
          .LinkList-main,
          .LinkList-viewers,
          .LinkList-button,
          .LinkList-type,
          .LinkList-description,
          .date-time
        )::before {
        display: none;
      }

      padding-left: var(--gap-s);
      width: 100%;
    }
  }

  .AssignmentDeskDashboard-boardView-title {
    background: var(--color-gray2);
    min-height: min-content;
    padding: var(--gap-m);
  }

  .AssignmentDeskDashboard-boardView-title.status-New {
    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-blue5);
  }

  .AssignmentDeskDashboard-boardView-title.status-Assigned {
    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-orange5);
  }

  .AssignmentDeskDashboard-boardView-title.status-Fulfilled {
    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-yellow3);
  }

  .AssignmentDeskDashboard-boardView-title.status-Closed {
    border-bottom: calc(var(--lineHeight-xs) / 4) solid var(--color-green5);
  }

  .Label.is-updated {
    background: var(--color-orange4);
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .SearchWidget-form .SearchWidget-title,
  .SearchWidget-title:not(.AssignmentDeskDashboard-title) {
    display: none;
  }

  .SearchWidget-recent {
    display: none;
  }

  .SearchWidget-saved {
    display: block;
  }

  .AssignmentDeskDashboard-resultSummary {
    display: none;
  }

  @media screen and (max-width: 767px) {
    .SearchResult-pagination {
      margin: 0;
    }

    &.SearchWidget {
      display: block;
    }
  }

  .SearchResult-pagination {
    margin-top: 0;
  }

  .AssignmentDeskDashboard-controls {
    .DashboardWidget-filters;

    border-top: 0;
    justify-content: space-between;
    margin: 0;
    top: 0;
    width: 100%;
  }

  .AssignmentDeskDashboard-heading {
    font-weight: bold;
  }

  .AssignmentDeskDashboard-count {
    padding: var(--gap-s);
  }

  .LinkList {
    .GroupingHeader tr:first-child {
      border-bottom: var(--gap-xs) solid var(--color-black);
    }

    tr {
      padding-left: calc(var(--LinkList-imageSize) + var(--gap-l));
      padding-right: var(--gap-l);
    }

    tr.no-icon {
      padding-left: var(--gap-l);
      padding-right: var(--gap-l);
    }

    .GroupingHeader.no-icon {
      background: var(--color-gray2);
      border-bottom: var(--gap-xs) solid var(--color-black);
      min-height: min-content;
    }

    .GroupingHeader.no-icon.status-New {
      border-bottom: var(--gap-xs) solid var(--color-blue5);
    }

    .GroupingHeader.no-icon.status-Assigned {
      border-bottom: var(--gap-xs) solid var(--color-orange5);
    }

    .GroupingHeader.no-icon.status-Fulfilled {
      border-bottom: var(--gap-xs) solid var(--color-yellow3);
    }

    .GroupingHeader.no-icon.status-Closed {
      border-bottom: var(--gap-xs) solid var(--color-green5);
    }

    .RightTitle {
      padding-left: var(--gap-xs);
    }

    .LinkList-image.is-icon[data-icon-name]::before {
      padding-left: var(--gap-l);
    }

    .LinkList-image.is-icon[data-icon-name] {
      --Icon-size: var(--iconSize-m);

      top: 0;
    }

    .Label.is-pastDue {
      background: var(--color-red6);
    }
  }

  .LinkList.is-urgent {
    background: var(--color-dominant2);
  }

  .LinkList-description {
    margin-right: var(--gap-l);
  }

  tr.is-updated {
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
    animation-name: AddAnimation;
    animation-timing-function: ease-in-out;
  }

  tr.is-icon[data-icon-name]::before {
    &:extend(.Icon);

    content: attr(data-icon-name);
    left: var(--gap-l);
    position: absolute;
    top: var(--gap-l);
  }
}

.AssignmentDeskDashboard-actionsWrapper {
  .AssignmentDeskDashboard-actionsToggle {
    .IconButton;

    --IconButton-name: 'more_horiz';

    background: transparent;
    border: none;
    padding: 0;

    &.is-active {
      .IconButton.is-focus;

      --IconButton-name: 'close';
    }
  }

  .AssignmentDeskDashboard-actions {
    .Dropdown;

    .AssignmentDeskDashboard-action {
      [role='menuitem'] {
        .Dropdown-item;
        .Link.is-blue;
      }
    }
  }

  .AssignmentDeskDashboard-actions.is-open {
    .Dropdown.is-open;
  }
}

.AssignmentDeskDashboard-refresh {
  background-color: var(--color-blue5);
  color: var(--color-white);
  display: none;
  font-weight: bold;
  justify-content: center;
  padding: var(--gap-m);
  transition:
    height 1s,
    opacity 1s ease-in-out;

  &::before {
    .Icon;

    content: 'refresh';
    margin-right: var(--gap-l);
  }

  &:hover {
    color: var(--color-white);
    text-decoration: none;
  }
}

// Hides the popup from the date field due to the calendar popup UI
.Popup[data-popup-source-class~='SingleFieldUpdate-date'] {
  visibility: hidden;
}

.SingleFieldUpdate-date {
  .IconButton;

  --IconButton-name: 'keyboard_arrow_down';

  margin-left: calc(0 - var(--gap-xs));
  margin-right: calc(0 - var(--gap-s));
  transition: transform var(--time-xs);

  &.is-open {
    transform: rotate(180deg);
  }
}

.SingleFieldUpdate-error,
.SingleFieldUpdate-success {
  visibility: hidden;
}

@media (@mq-m) {
  .AssignmentDeskDashboard-toolbar {
    background-color: var(--color-white);
    position: fixed;
    width: calc(100% - var(--SearchWidget-leftWidth));
    z-index: 1;

    & + * {
      padding-top: calc(
        var(--Text-height) * var(--assignment-desk-toolbar-gap) + var(--gap-m) *
          2 + var(--gap-l)
      );
    }
  }
}

.AssignmentDeskDashboard.is-printView {
  padding: 0;

  .AssignmentDeskDashboard-toolbar,
  .SearchWidget-title,
  .searchControls,
  .SearchWidget-history,
  .SingleFieldUpdate-date {
    display: none;
  }

  .AssignmentDeskDashboard-toolbar + * {
    padding-top: 0;
  }

  .SearchWidget-result {
    .AssignmentDeskDashboard-resultSummary {
      display: block;
      margin-bottom: var(--gap-l);
    }

    tr {
      page-break-inside: avoid;
    }
  }
}

@media print {
  @page {
    margin: 0.5in 0.25in;
  }

  a {
    color: var(--color-black);
    font-weight: bold;
  }

  body {
    background: var(--color-white);
  }

  html {
    height: auto;
    position: relative;
  }

  .Page {
    height: auto;
  }

  .Page-header {
    display: none;
  }
}
