/* ==========================================================================
   Config
   ========================================================================== */
@use "sass:math";

$duedate-popover-width: 304px !default;
$duedate-timepicker-width: 80px !default;
$duedate-timepicker-height: 220px !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-duedate__dropdown {
  width: $duedate-popover-width;
  padding: 0;

  .gui-arrow {
    display: none;
  }
}

.gui-duedate__container {
  font-size: $typo-size-slight;
  position: relative;
}

.gui-duedate__button {
  color: $color-text-light;

  .gui-button {
    text-decoration: underline;
    color: $color-text-light;
  }

  .gui-icon {
    margin-right: $layout-spacing-base * 0.25;
    top: -2px;
    position: relative;
    vertical-align: middle;
  }

  &:hover,
  &:active {
    text-decoration: none;
  }
}

.gui-duedate__button--set-duedate {
  color: $color-link-base;
}

.gui-duedate__button.gui-color-overdue,
.gui-duedate__button.gui-color-overdue .gui-button {
  color: $color-text-danger;
}

.gui-duedate__container--completed.gui-duedate__container--completed {
  .gui-duedate__button,
  .gui-duedate__toggle {
    text-decoration: line-through;
    font-style: italic;
    color: $color-text-light;
  }

  .gui-icon path,
  &:hover .gui-icon path {
    fill: $color-text-light;
  }
}

.gui-duedate__header {
  padding: $layout-spacing-base * 0.5;
  border-bottom: 1px solid $neutral-light;
  font-size: $typo-size-slight;
  color: $neutral-dark;
}

.gui-duedate__header--date {
  font-size: $typo-size-base;
  color: $neutral-dark;
}

.gui-duedate__header--date-not-set {
  color: $neutral-base;
}

.gui-duedate__time {
  color: $color-text-base;
  text-decoration: underline;

  &:hover {
    color: $color-text-base;
  }
}

.gui-color-overdue .gui-duedate__time {
  color: $primary-red;
}

.gui-duedate__submit {
  text-align: center;
  padding: 0 0 $layout-spacing-base * 0.5;
}

.gui-duedate__submit--cancel {
  font-size: $typo-size-slight;
  margin-right: $layout-spacing-base * 0.5;
  color: $neutral-base;

  &:hover {
    text-decoration: none;
    color: $neutral-dark;
  }
}

.gui-duedate__submit--save {
  padding: $layout-spacing-base * 0.25 math.div($layout-spacing-base, 2.5);
}

.gui-duedate__submit--hidden {
  display: none;
}

/* DueDate Time picker dropdown */

.gui-duedate__dropdown .gui-duedate__time-picker {
  min-width: $duedate-timepicker-width;
  max-height: $duedate-timepicker-height;
  overflow: auto;
  padding: 0;

  > li {
    border-bottom: 1px solid $color-border-base;

    > a {
      text-decoration: none;
      padding: math.div($layout-spacing-base, 2.5) $layout-spacing-base * 0.5;

      &:hover {
        background-color: transparent;
        color: $color-link-base;
      }
    }
  }

  > .gui-active a {
    background-color: $color-link-base;
    color: white;

    &:hover {
      background-color: $color-link-base;
      color: white;
    }
  }
}

/* DueDate Label */
.gui-duedate__label,
.gui-duedate__label--button,
.gui-duedate__label--button:hover {
  color: $neutral-base;
  font-size: $typo-size-slight;

  .gui-icon {
    margin-right: $layout-spacing-base * 0.25;
    top: -2px;
    position: relative;
    vertical-align: middle;
  }

  .gui-icon path {
    fill: $neutral-base;
  }
}

.gui-duedate__label.gui-color-overdue,
.gui-duedate__label.gui-color-overdue .gui-duedate__label--button {
  color: $primary-red;

  .gui-icon path {
    fill: $primary-red;
  }
}

.gui-duedate__label--button {
  text-decoration: underline;
}

/* DueDate remove date dropdown */
.gui-duedate__remove {
  position: absolute;
  top: $layout-spacing-base;
  right: 0;
}

.gui-duedate__remove--not-set {
  opacity: 0;
}

.gui-duedate__remove .gui-icon {
  padding: 0 $layout-spacing-base;

  path {
    fill: $neutral-dark;
  }
}

.gui-duedate__remove.gui-is-active .gui-icon path {
  fill: $color-brand-blue;
}