@mixin calendar {
  @include widget;
  padding: $padding * 2 $padding * 2 0;

  calendar {
    all: unset;

    &.button {
      @include button($flat: true);
    }

    &:selected {
      box-shadow:
        inset 0 -8px 0 0 transparentize($accent, 0.5),
        inset 0 0 0 1px $accent;
      border-radius: $radii * 0.6;
    }

    &.header {
      background-color: transparent;
      border: none;
      color: transparentize($fg-color, 0.5);
    }

    &.highlight {
      background-color: transparent;
      color: transparentize($accent, 0.5);
    }

    &:indeterminate {
      color: transparentize($fg-color, 0.9);
    }
    font-size: 1.1em;
    padding: 0.2em;
  }
}

window#dashboard .window-content {
  @include floating-widget;

  .notifications {
    min-width: $notifications-width;

    .header {
      margin-bottom: $spacing;
      margin-right: $spacing;

      > label {
        margin-left: $radii / 2;
      }

      button {
        @include button;
        padding: $padding/2 $padding;
      }
    }

    .notification-scrollable {
      @include scrollable;
    }

    .notification-list {
      margin-right: $spacing;
    }

    .notification {
      @include notification;

      > box {
        @include widget;
        padding: $padding;
        margin-bottom: $spacing;
      }
    }

    .placeholder {
      image {
        font-size: 7em;
      }
      label {
        font-size: 1.2em;
      }
    }
  }

  separator {
    background-color: $popover-border-color;
    min-width: 2px;
    border-radius: $radii;
    margin-right: $spacing;
  }

  .datemenu,
  .system-info {
    @include spacing;
  }

  .clock-box {
    padding: $padding;

    .clock {
      font-size: 5em;
    }

    .uptime {
      color: transparentize($fg-color, 0.2);
    }
  }

  .calendar {
    @include calendar;
  }

  .circular-progress-box {
    @include widget;
    padding: $padding;

    .circular-progress {
      min-height: $sys-info-size;
      min-width: $sys-info-size;
      margin: $padding/2;
      font-size: $padding;
      background-color: $bg-color;
      color: $accent;

      image {
        font-size: 1.8em;
      }
    }
  }
}