.datepicker {
  width: -moz-min-content;
  width: min-content;
}

.datepicker .focused {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.datepicker:not(.active) {
  display: none;
}

.datepicker-dropdown {
  padding-top: 4px;
  position: absolute;
  z-index: 9999;
  width: 280px;
}

@media screen and (min-width: 1024px) {
  .datepicker-dropdown {
    width: 320px;
  }
}

.datepicker-dropdown.datepicker-orient-top {
  padding-bottom: 4px;
  padding-top: 0;
}

.datepicker-picker {
  font-family: var(--font-body-family);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.datepicker-dropdown .datepicker-picker {
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

.datepicker-main {
  flex: auto;
  padding: 6px;
}

.datepicker-footer {
  display: none;
}

.datepicker-controls {
  display: flex;
  gap: 4px;
}

.datepicker-header .datepicker-controls {
  padding: 6px 6px 0;
}

.datepicker-controls .datepicker-button {
  align-items: center;
  background-color: rgb(var(--color-background));
  font-size: 1.5rem;
  line-height: 1.2;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  color: rgb(var(--color-foreground));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 5px 3px;
  position: relative;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  opacity: 0.8;
  border: 0.1rem solid transparent;
}

.datepicker-header .datepicker-controls .datepicker-button:active,
.datepicker-header .datepicker-controls .datepicker-button:focus,
.datepicker-header .datepicker-controls .datepicker-button:hover {
  outline: none;
  opacity: 1;
  border-radius: 6px;
  border: 0.1rem solid rgb(var(--color-foreground));
}

.datepicker-controls .datepicker-button:focus:not(:active) {
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

.datepicker-controls .datepicker-button:active {
  outline: none;
  opacity: 1;
  border-radius: 6px;
}

.datepicker-controls .datepicker-button[disabled] {
  cursor: not-allowed;
}

.datepicker-controls .view-switch {
  flex: auto;
}

.datepicker-controls .next-button,
.datepicker-controls .prev-button {
  flex: 0 0 14.2857142857%;
  padding-left: 4px;
  padding-right: 4px;
}

.datepicker-controls .next-button.disabled,
.datepicker-controls .prev-button.disabled {
  visibility: hidden;
}

.datepicker-grid,
.datepicker-view {
  display: flex;
}

.datepicker-view {
  align-items: stretch;
}

.datepicker-grid {
  flex: auto;
  flex-wrap: wrap;
}

.datepicker .days {
  display: flex;
  flex: auto;
  flex-direction: column;
}

.datepicker .days-of-week {
  display: flex;
}

.datepicker .weeks {
  align-items: stretch;
  display: flex;
  flex: auto;
  flex-direction: column;
}

.datepicker span {
  -webkit-touch-callout: none;
  align-items: center;
  border-radius: 4px;
  cursor: default;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.datepicker .dow {
  font-size: 12px;
  color: rgb(var(--color-foreground));
  font-weight: 700;
  padding: 2px 4px 6px;
}

.datepicker .days .dow,
.datepicker-cell {
  flex-basis: 14.2857142857%
}

.datepicker-cell {
  height: 2.5rem
}

.datepicker-cell:not(.day) {
  flex-basis: 25%;
  height: 4.5rem
}

.datepicker-cell:not(.disabled):hover {
  border: 0.1rem solid rgb(var(--color-foreground));
  cursor: pointer
}

.datepicker-cell.focused:not(.selected) {
  background-color: rgba(var(--color-foreground), .1);
  border-radius: 6px;
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
  color: rgb(var(--color-background));
  background: rgb(var(--color-foreground));
}

.datepicker-cell.disabled {
  cursor: default;
  background: rgb(var(--color-foreground));
  opacity: 0.7;
}

.datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled) {
  color: rgb(var(--color-foreground));
  opacity: .6;
}