@import '../../styles/common';

.DatePicker {
  --pc-date-picker-range-end-border-radius: var(--p-border-radius-6);
  position: relative;
}

.MonthLayout {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--p-space-4));
  margin-left: calc(-1 * var(--p-space-4));
}

.MonthContainer {
  flex: 1 1 230px;
  margin-top: var(--p-space-4);
  margin-left: var(--p-space-4);
  max-width: calc(100% - var(--p-space-4));
  min-width: 230px;
}

.Month {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
  border-spacing: 0;
}

.Month-current {
  font-weight: var(--p-font-weight-bold);
}

.DayCell {
  width: (100% / 7);
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: var(--p-border-radius-1);
}

.DayCell-inRange {
  border-radius: 0;
}

.Day {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: var(--p-space-2);
  background: transparent;
  border: none;
  border-radius: var(--p-border-radius-1);
  outline: none;
  font-size: var(--p-font-size-1);
  text-align: center;
  color: var(--p-text);
  cursor: pointer;

  &:hover {
    background: var(--p-interactive-hovered);
    color: var(--p-text-on-interactive);
    outline: var(--p-border-width-1) solid transparent;
  }

  @include focus-ring;

  &:focus:not(:active) {
    @include focus-ring($style: 'focused');
  }
}

.Day-today {
  font-weight: var(--p-font-weight-bold);
}

.Day-inRange {
  background: var(--p-surface-selected);
  border-radius: 0;

  @media (-ms-high-contrast: active) {
    -ms-high-contrast-adjust: none;
    background-color: Highlight;
    color: HighlightText;

    &:hover {
      background-color: HighlightText;
      color: Highlight;
      outline: var(--p-border-width-2) solid Highlight;
    }
  }
}

.Day-selected {
  background: var(--p-interactive);
  color: var(--p-text-on-interactive);

  @media (-ms-high-contrast: active) {
    -ms-high-contrast-adjust: none;
    background-color: Highlight;
    color: HighlightText;

    &:hover {
      background-color: HighlightText;
      color: Highlight;
      outline: var(--p-border-width-2) solid Highlight;
    }
  }
}

.Day-disabled {
  background-color: transparent;
  color: var(--p-text-disabled);

  &:hover {
    background-color: transparent;
    color: var(--p-text-disabled);
  }

  @media (-ms-high-contrast) {
    -ms-high-contrast-adjust: none;
    color: grayText;

    &:hover {
      color: grayText;
      outline: none;
    }
  }

  &:focus {
    @include no-focus-ring;
  }
}

.EmptyDayCell {
  width: calc(100% / 7);
  margin: 0;
  padding: 0;
}

.Weekday {
  padding: var(--p-space-2);
  background: transparent;
  font-size: var(--p-font-size-1);
  font-weight: var(--p-font-weight-regular);
  color: var(--p-text-subdued);
  text-align: center;
}

.Weekday-current {
  font-weight: var(--p-font-weight-bold);
  color: var(--p-text);
}

.Header {
  position: absolute;
  top: var(--p-space-4);
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.Title {
  flex: 1 1 auto;
  margin-top: var(--p-space-05);
  padding-bottom: var(--p-space-1);
  text-align: center;
}

.Day-firstInRange {
  border-radius: var(--p-border-radius-1);

  &.Day-hasRange,
  &.Day-hoverRight {
    border-radius: var(--pc-date-picker-range-end-border-radius) 0 0
      var(--pc-date-picker-range-end-border-radius);

    &::after {
      border-radius: var(--pc-date-picker-range-end-border-radius) 0 0
        var(--pc-date-picker-range-end-border-radius);
    }
  }
}

.Day-lastInRange {
  border-radius: 0 var(--pc-date-picker-range-end-border-radius)
    var(--pc-date-picker-range-end-border-radius) 0;

  &::after {
    border-radius: 0 var(--pc-date-picker-range-end-border-radius)
      var(--pc-date-picker-range-end-border-radius) 0;
  }
}

.Week {
  margin-bottom: var(--p-space-05);

  // stylelint-disable-next-line selector-max-specificity
  > .Day-inRange:first-child:not(.Day-firstInRange):not(.Day-lastInRange) {
    border-radius: var(--p-border-radius-1) 0 0 var(--p-border-radius-1);
  }

  // stylelint-disable-next-line selector-max-specificity
  > .Day-inRange:last-child:not(.Day-firstInRange):not(.Day-lastInRange) {
    border-radius: 0 var(--p-border-radius-1) var(--p-border-radius-1) 0;
  }
}

.Day-inRange,
.Day-inRange:not(:hover) + .Day {
  // stylelint-disable-next-line selector-max-specificity
  &::after {
    border-radius: 0 var(--pc-date-picker-range-end-border-radius)
      var(--pc-date-picker-range-end-border-radius) 0;
  }
}