$block = ".kui-datepicker";

{$block} {
  display: inline-block;
  background: $c-white-base;
  text-align: center;
  cursor: default;

  &:focus {
    outline: 1px dotted $c-gray-base;
  }

  &__calendar {
    border-collapse: collapse;

    thead td {
      padding: 4px;
    }
  }

  &__day {
    padding: 8px;
    border: 1px solid transparent;
    color: $c-gray-darkest;
    transition: all 100ms;

    &:hover {
      background: $c-gray-lightest;
    }

    &--today {
      font-weight: 900;
    }

    &--outside-month {
      color: $c-gray-base;
    }

    &--selected {
      background: $c-brand-base;
      color: $c-white-base;

      &:hover {
        background: $c-brand-light;
      }
    }

    &--invalid {
      background: $c-gray-lightest;
      color: $c-gray-base;
      cursor: not-allowed;

      &:hover {
        background: $c-gray-lightest;
      }
    }
  }

  &__next, &__previous {
    font-size: 18px;

    &:hover {
      background: $c-gray-lightest;
    }
  }
}