frontend/app/assets/stylesheets/archivesspace/datepicker.scss
// ANW-170, ANW-490: Opt-in to datepicker

.has-error .input-group.date .form-control,
.has-error.input-group.date .form-control,
.has-error .input-group.date .input-group-append button,
.has-error.input-group.date .input-group-append button {
  /* Variant .has-error selectors b/c BS v4 changed validation behavior */
  color: #a94442;
  border-color: #a94442;
  border-left-color: rgb(169, 68, 66);
  background-color: #f2dede;
}
.has-error .input-group.date .form-control,
.has-error.input-group.date .form-control {
  background: #fff;
}

.input-group.date .datepicker-enabled button.btn {
  color: #fff;
  background-color: $grayLight;
}

input:invalid {
  border: 1px solid #a94442;
}

/* ANW-1821 Bootstrap v4 updates */
.datepicker {
  &.dropdown-menu {
    font-size: 1rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }

  padding: 0.25rem;

  table tr {
    td,
    th {
      width: 2rem;
      height: 2rem;
      padding: 0.25rem;
      text-align: center;
    }

    td.day:hover,
    td.focused {
      background: $grayLighter;
      cursor: default;
    }

    td {
      &.active.active,
      &.active.disabled,
      &.active.disabled.active,
      &.active.disabled.disabled,
      &.active.disabled:active,
      &.active.disabled:hover,
      &.active.disabled:hover.active,
      &.active.disabled:hover.disabled,
      &.active.disabled:hover:active,
      &.active.disabled:hover:hover,
      &.active.disabled:hover[disabled],
      &.active.disabled[disabled],
      &.active:active,
      &.active:hover,
      &.active:hover.active,
      &.active:hover.disabled,
      &.active:hover:active,
      &.active:hover:hover,
      &.active:hover[disabled],
      &.active[disabled] {
        border-color: $blueDark;
        background-color: $blue;
        background-image: none;
      }

      span {
        &.active.active,
        &.active.disabled,
        &.active.disabled.active,
        &.active.disabled.disabled,
        &.active.disabled:active,
        &.active.disabled:hover,
        &.active.disabled:hover.active,
        &.active.disabled:hover.disabled,
        &.active.disabled:hover:active,
        &.active.disabled:hover:hover,
        &.active.disabled:hover[disabled],
        &.active.disabled[disabled],
        &.active:active,
        &.active:hover,
        &.active:hover.active,
        &.active:hover.disabled,
        &.active:hover:active,
        &.active:hover:hover,
        &.active:hover[disabled],
        &.active[disabled],
        &.active:active,
        &.active:hover,
        &.active:hover.active,
        &.active:hover.disabled,
        &.active:hover:active,
        &.active:hover:hover,
        &.active:hover[disabled],
        &.active[disabled] {
          border-color: $blueDark;
          background-color: $blue;
          background-image: none;
        }
      }
    }
  }
}
