.datepicker {
  display: inline-flex;
  flex-direction: column;

  &__row {
    display: flex;
    align-items: center;
    gap: spacing(-1);
  }

  &__nav, &__today {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  &__input {
    position: relative;
    flex: 1 1 auto;
    display: inline-flex;

    input {
      width: 100%;
      padding-right: spacing(-1, $add: "1.1em");
    }
  }

  &__toggle {
    @include icon-style {
      @include set-icon("calendar");
    }
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: spacing(-1, $add: "1.1em");
    padding: 0;
    border: none;
    background: none;
    color: color("foreground");
    cursor: pointer;

    &[disabled] {
      color: color("foreground-disabled");
      cursor: default;
    }
  }

  &__calendar-container {
    position: absolute;
    // A popover, not a stacked sibling: at just-above-static it lost to anything on the
    // page with a raised z-index, such as the sticky week number in the timetable
    z-index: $z-index-pop-over;
    display: inline-block;
    padding: spacing(-4) spacing(-4) 0 spacing(-4);
    box-shadow: $shadow-style-front color("shadow");
    background-color: color("background");
    margin-top: calc(-1 * #{spacing(-1)} - #{$width-border});
  }
}

.fieldset__horizontal-wrapper .datepicker__calendar-container {
  margin-top: -#{$width-border};
}

// Anchored under a trigger button instead of tucked under a datepicker input. The
// offset is set by whoever owns the button, so the tuck-under margin has to go.
.datepicker__calendar-container--anchored {
  margin-top: 0;
}