$oui-datepicker-selected-today-box-shadow-width: 1px;
$oui-datepicker-selected-fade-amount: 0.6;
$oui-datepicker-today-fade-amount: 0.2;
$oui-calendar-body-font-size: 13px !default;
$oui-calendar-body-label-size: 14px !default;
$form-field-border-color: #9c9c9c;
$form-field-placeholder-disabled-color: #9b9b9b;
$form-field-placeholder-color: #333333;
$oui-calendar-body-label-weight: 400;
$oui-calendar-table-header-weight: 400;
$oui-calendar-weekday-table-font-size: 11px !default;
$oui-datepicker-input-padding: 7px 9px !important;

@mixin _oui-datepicker-color($palette) {
  $foreground: map-get($theme, foreground);
  .oui-calendar-body-selected {
    background-color: map-get($palette, default);
    color: map-get($palette, default-contrast);
  }

  .oui-calendar-body-today.oui-calendar-body-selected {
    box-shadow: 0 0 0 $oui-datepicker-selected-today-box-shadow-width
      map-get($foreground, hint-text);
    border: 1px solid #ffffff;
  }
}

@mixin oui-datepicker-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $primary: map-get($theme, primary);

  .oui-calendar-arrow {
    border-top-color: map-get($foreground, icon);
  }

  // The prev/next buttons need a bit more specificity to
  // avoid being overwritten by the .oui-icon-button.
  .oui-datepicker-toggle,
  .oui-datepicker-content .oui-calendar-next-button,
  .oui-datepicker-content .oui-calendar-previous-button {
    color: map-get($foreground, icon);
  }
  .oui-datepicker-content .oui-calendar-next-button,
  .oui-datepicker-content .oui-calendar-previous-button {
    &:hover {
      background-color: map-get($foreground, hover);
      border-radius: 50%;
    }
    &:disabled {
      &:hover {
        background-color: transparent;
      }
      svg {
        color: #c8c8c8;
      }
    }
    svg {
      color: #4a4a4a;
    }
  }

  .oui-calendar-table-header {
    color: map-get($foreground, hint-text);
  }

  .oui-calendar-table-header-divider::after {
    background: map-get($foreground, divider);
  }

  .oui-calendar-body-label {
    color: map-get($foreground, secondary-text);
  }

  .oui-calendar-body-cell-content {
    color: map-get($foreground, text);
    border-color: transparent;
  }

  .oui-datepicker-focused {
    border-color: map-get($primary, default) !important;
  }

  .oui-form-field-appearance-underline .oui-datepicker-focused {
    border-width: 2px !important;
  }

  .oui-calendar-body-disabled
    > .oui-calendar-body-cell-content:not(.oui-calendar-body-selected) {
    color: map-get($foreground, disabled-text);
  }

  .oui-calendar-body-cell:not(.oui-calendar-body-disabled):hover,
  .cdk-keyboard-focused .oui-calendar-body-active,
  .cdk-program-focused .oui-calendar-body-active {
    & > .oui-calendar-body-cell-content:not(.oui-calendar-body-selected) {
      background-color: map-get($foreground, hover);
    }
  }

  .oui-calendar-body-today:not(.oui-calendar-body-selected) {
    // Note: though it's not text, the border is a hint about the fact that this is today's date,
    // so we use the hint color.
    border-color: map-get($foreground, hint-text);
  }

  .oui-calendar-body-disabled
    > .oui-calendar-body-today:not(.oui-calendar-body-selected) {
    border-color: map-get($foreground, hint-text);
  }

  @include _oui-datepicker-color($primary);

  .oui-datepicker-content {
    &.oui-accent {
      @include _oui-datepicker-color(map-get($theme, accent));
    }

    &.oui-warn {
      @include _oui-datepicker-color(map-get($theme, warn));
    }
  }

  .oui-datepicker-toggle-active {
    color: map-get(map-get($theme, primary), default);

    &.oui-accent {
      color: map-get(map-get($theme, accent), default);
    }

    &.oui-warn {
      color: map-get(map-get($theme, warn), default);
    }
  }
  .oui-form-field-infix .oui-datepicker-input:disabled {
    border-color: #c8c8c8;
    background-color: transparent;
    cursor: pointer;
    &::placeholder {
      color: #666;
      opacity: 1; /* Firefox */
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #666;
    }

    &::-ms-input-placeholder {
      /* Microsoft Edge */
      color: #666;
    }
  }

  .oui-datepicker-input.oui-input.oui-datepicker-disabled {
    &::placeholder {
      color: $form-field-placeholder-disabled-color;
      opacity: 1; /* Firefox */
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: $form-field-placeholder-disabled-color;
    }

    &::-ms-input-placeholder {
      /* Microsoft Edge */
      color: $form-field-placeholder-disabled-color;
    }
  }
  input.oui-datepicker-disabled {
    border: 1px solid #e4e4e4 !important;
    background-color: #f9f9f9 !important;
    color: $form-field-placeholder-disabled-color !important;
    opacity: 1;
    cursor: default !important;
  }
  .oui-datepicker-disabled {
    background-color: #f9f9f9 !important;
    svg {
      opacity: 0.5;
      color: $form-field-placeholder-disabled-color;
      cursor: default !important;
    }
    button {
      cursor: default;
    }
  }
}

.oui-calendar-body {
  font-size: $oui-calendar-body-font-size;
}

.oui-calendar-body-label,
.oui-calendar-period-button {
  font: {
    size: $oui-calendar-body-label-size;
    weight: $oui-calendar-body-label-weight;
  }
}

.oui-calendar-table-header th {
  font: {
    size: $oui-calendar-weekday-table-font-size;
    weight: $oui-calendar-table-header-weight;
  }
}

.oui-datepicker-input {
  color: $form-field-placeholder-color !important;
}
.oui-form-field-appearance-underline .oui-datepicker-input {
  padding: $oui-datepicker-input-padding;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  // Avoid browsers rendering the focus ring in some cases.
  outline: 0;

  // Avoid some cases where the browser will still render the native controls (see #9049).
  -webkit-appearance: none;
  -moz-appearance: none;
}
.oui-form-field-infix .oui-icon-button {
  &[class$='focused'] {
    background: none !important;
  }
}