// Table of Contents
// ==================================================
// Datepicker

// scss-lint:disable ImportantRule
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorDepth

// Datepicker
// ==================================================
.datepicker {
  padding: 4px;

  table {
    width: 100%;

    td,
    th {
      border-radius: border-radius(b);
      padding: 8px 6px;
      text-align: center;
    }
    @if ($pseudo-elements) {
      th:not(.dow) {
        &:hover,
        &:focus {
          background: color(gray);
          color: color(white);
          cursor: pointer;
        }
      }
    }
    td {
      color: color(dark-haze);

      &.today {
        background: color(light-slate);
        color: color(primary);
      }
      @if ($pseudo-elements) {
        &.day,
        &.today {
          &:hover,
          &:focus {
            background: color(gray);
            color: color(white);
            cursor: pointer;
          }
          &:active,
          &.active {
            background: color(primary);
            color: text-color-on(primary);
          }
        }
        &.old,
        &.new {
          color: color(light-gray);

          &:hover,
          &:focus { color: color(dark-haze); }
        }
        &.disabled {
          background: color(transparent) !important;
          color: color(dark-gray) !important;
          cursor: not-allowed !important;
          text-decoration: line-through;
        }
      }

      span {
        border-radius: border-radius(b);
        display: block;
        float: left;
        margin: 1%;
        padding: 13px 0;
        width: 23%;

        @if ($pseudo-elements) {
          &:hover,
          &.focus,
          &.focused {
            background: color(gray);
            color: color(white);
            cursor: pointer;
          }
          &:active,
          &.active,
          &.focused {
            background: color(primary);
            color: text-color-on(primary);
          }
          &.disabled {
            background: color(transparent) !important;
            color: color(dark-gray) !important;
            cursor: not-allowed !important;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}