/// Theme for user component.
///
/// @author Federico Gambardella<fedega86@libero.it>
/// @param $section
/// @param $map
@mixin component-date-picker($section, $map) {
  @if ($section == "date-picker") {
    .fk-picker-no-day {
      color: map-get($map, no-day-selected-color);
      cursor: auto;
      pointer-events: none;
    }

    .fk-date-today {
      border: map-get($map, today-date-border);
      background-color: map-get($map, today-date-bg);

      &:not(.date-selected):hover {
        background-color: map-get($map, today-date-not-selected) !important;
      }
    }

    .fk-range-date {
      color: map-get($map, range-date-color);
      background-color: map-get($map, range-date-border-color);
      border-color: map-get($map, range-date-bg);
      border-radius: 0;

      &:hover {
        background-color: map-get($map, range-date-hover-bg) !important;
        border-color: map-get($map, range-date-hover-border-color) !important;
        color: map-get($map, range-date-hover-color) !important;
      }

      &:focus {
        box-shadow: none;
      }
    }

    .fk-date-selected {
      color: map-get($map, date-selected-color) !important;
      background-color: map-get($map, range-date-bg) !important;
      border-color: map-get($map, date-selected-bc) !important;
      box-shadow: none !important;
    }

    .fk-first-range-index {
      border-radius: 3px 0 0 3px;
    }

    .fk-last-range-index {
      border-radius: 0 3px 3px 0;
    }

    .fk-button-week {
      width: 45px;
      font-weight: 600;
      pointer-events: none;
      font-size: 14px;
      padding: 0;
      color: map-get($map, week-days-color);
    }

    .fk-button-picker {
      width: 45px;
      font-size: 14px;
      font-weight: 500 !important;

      &:not(.picker-no-day):hover {
        background-color: map-get($map, btn-picker-hover-bg);
        color: map-get($map, bbtn-picker-hover-color);
      }
    }

    .fk-date {
      margin-left: 75px;
    }

    .fk-date-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ede9e9;
    }

    .fk-date-selected-time {
      color: map-get($map, date-selected-time-color) !important;
      background-color: map-get($map, date-selected-time-bg) !important;
      border-color: map-get($map, date-selected-time-border-color) !important;
      box-shadow: none !important;
      border-radius: 3px;
    }

    .fk-time-picker-container {
      display: flex;
      justify-content: center;
    }

    .fk-time-container {
      list-style-type: none;
      max-height: 160px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
    }

    .fk-row-time {
      width: 50px;
      padding-top: 3px;
      padding-bottom: 3px;
      text-align: center;

      &:hover {
        background-color: map-get($map, row-time-hover);
        border-radius: 3px;
      }
    }

    .fk-time-picker-buttons {
      display: flex;
      justify-content: space-between;
      border-top: map-get($map, time-picker-button-border);
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .fk-now {
      margin-left: 10px;
    }

    .fk-ok {
      margin-right: 10px;
    }

    .fk-months-container {
      padding-left: 60px;
    }

    .fk-hours-container {
      padding-left: 20px;
    }

    .fk-picker-container {
      width: 320px;
    }

    .fk-calendar-icon {
      margin-left: 11px;
    }

    .fk-time-container-month {
      margin-left: 43px;
    }

    .fk-no-shadow {
      box-shadow: none;
    }

    .fk-picker-title:active {
      background-color: map-get($map, date-picker-title-active);
    }

    .fk-core-picker {
      border: map-get($map, core-picker);
    }

    .large-cell {
      width: 30% !important;
      height: 10rem;
    }

    .large-days {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .large-days-container {
      width: 10rem;
    }

    .fk-picker-large {
      width: 100% !important
    }
  }
}