// Set default variables here,
//

$x-calendar-bg:                   $white                           !default;
$x-calendar-bg-date-hover:        theme-color("light-transparent") !default;
$x-calendar-bg-date-active:       theme-color("secondary")         !default;
$x-calendar-border:               $border-color                    !default;
$x-calendar-border-radius:        $border-radius                   !default;

$x-calendar-text-primary:         theme-color("primary")           !default;
$x-calendar-text-default:         theme-color("default")           !default;
$x-calendar-text-active:          $white                           !default;
$x-calendar-text-disabled:        theme-color("info-transparent")  !default;

$x-calender-icon:                 str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-calendar-text-primary}' viewBox='0 0 96 96'%3e%3cpath fill-rule='evenodd' d='M80,8 L96,8 L96,96 L0,96 L0,8 L16,8 L16,0 L24,0 L24,8 L72,8 L72,0 L80,0 L80,8 L80,8 Z M8,24 L88,24 L88,88 L8,88 L8,24 L8,24 Z M64,40 L80,40 L80,56 L64,56 L64,40 L64,40 Z M40,40 L56,40 L56,56 L40,56 L40,40 L40,40 Z M40,64 L56,64 L56,80 L40,80 L40,64 L40,64 Z M16,40 L32,40 L32,56 L16,56 L16,40 L16,40 Z M16,64 L32,64 L32,80 L16,80 L16,64 L16,64 Z'/%3E%3C/svg%3E"), "#","%23");
$arrow-left:                      str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-calendar-text-primary}' viewBox='0 0 96 96'%3e%3cpath d='M59.0292154,75.3649306 C60.0061345,76.376531 60.0061345,78.002068 59.0292154,79.0066918 C58.0522964,80.0113156 56.4741963,80.0159666 55.4995544,79.0066918 L26.9707846,49.5819128 C25.9938655,48.577289 25.9938655,46.9517519 26.9707846,45.9401516 L55.4995544,16.5153726 C56.4764735,15.5107488 58.0545736,15.5107488 59.0292154,16.5153726 C60.0061345,17.5246474 60.0061345,19.15251 59.0292154,20.1548082 L33.0099207,47.7633577 L59.0292154,75.3649306 L59.0292154,75.3649306 L59.0292154,75.3649306 Z'/%3E%3C/svg%3E"), "#","%23");
$arrow-right:                     str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-calendar-text-primary}' viewBox='0 0 96 96'%3e%3cpath d='M36.9707846,75.3649306 C35.9938655,76.376531 35.9938655,78.002068 36.9707846,79.0066918 C37.9477036,80.0113156 39.5258037,80.0159666 40.5004456,79.0066918 L69.0292154,49.5819128 C70.0061345,48.577289 70.0061345,46.9517519 69.0292154,45.9401516 L40.5004456,16.5153726 C39.5235265,15.5107488 37.9454264,15.5107488 36.9707846,16.5153726 C35.9938655,17.5246474 35.9938655,19.15251 36.9707846,20.1548082 L62.9900793,47.7633577 L36.9707846,75.3649306 L36.9707846,75.3649306 L36.9707846,75.3649306 Z'/%3E%3C/svg%3E"), "#","%23");
$arrow-down:                      str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-calendar-text-primary}' viewBox='0 0 96 96'%3e%3cpath d='M20.3969741,31.7326893 C19.3853738,30.7557702 17.7598367,30.7557702 16.755213,31.7326893 C15.7505892,32.7096084 15.7459382,34.2877085 16.755213,35.2623503 L46.179992,63.7911202 C47.1846158,64.7680393 48.8101528,64.7680393 49.8217532,63.7911202 L79.2465322,35.2623503 C80.2511559,34.2854313 80.2511559,32.7073312 79.2465322,31.7326893 C78.2372574,30.7557702 76.6093948,30.7557702 75.6070965,31.7326893 L47.9985471,57.7519841 L20.3969741,31.7326893 L20.3969741,31.7326893 L20.3969741,31.7326893 Z'/%3e%3c/svg%3e"), "#","%23");
$arrow-up:                        str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-calendar-text-primary}' viewBox='0 0 96 96'%3e%3cpath d='M20.3969741,63.7911202 C19.3853738,64.7680393 17.7598367,64.7680393 16.755213,63.7911202 C15.7505892,62.8142011 15.7459382,61.2361011 16.755213,60.2614592 L46.179992,31.7326893 C47.1846158,30.7557702 48.8101528,30.7557702 49.8217532,31.7326893 L79.2465322,60.2614592 C80.2511559,61.2383783 80.2511559,62.8164783 79.2465322,63.7911202 C78.2372574,64.7680393 76.6093948,64.7680393 75.6070965,63.7911202 L47.9985471,37.7718255 L20.3969741,63.7911202 L20.3969741,63.7911202 Z'/%3e%3c/svg%3e"), "#","%23");

/* Calendar */
.ui-calendar {
  .ui-inputtext {
    @extend .form-control;
  }

  &.ui-calendar-w-btn {
    @extend .x-input-group;

    .ui-calendar-button {
      @extend .x-input-group-append,
              .btn,
              .x-btn-default,
              .x-btn-icon-only,
              .p-0;

      z-index: 1;
      .ui-button-icon-left {
        @extend .x-icon-md;
        &.pi-calendar {
          height: 1.25rem;
          background-image: $x-calender-icon;
          background-repeat: no-repeat;
          background-size: 12px;
          background-position: center;
        }
      }

      .ui-button-text {
        @extend .d-none;
      }
    }
  }

}


/* Fluid */
.ui-fluid {

  .ui-calendar {
    width: 100%;

    &.ui-calendar-w-btn .ui-inputtext {
      width: calc(100% - 2em);
    }
  }

  .ui-calendar-button {
    width: 2em;
  }

  .ui-datepicker-buttonbar button {
    @extend .w-auto;
  }
}


/* Datepicker */
.ui-datepicker {
  @extend .position-absolute,
          .border,
          .py-2,
          .px-1,
          .w-auto;
  background-color: $x-calendar-bg;
  box-shadow: $dropdown-box-shadow;
  display: none;

  &.ui-datepicker-inline {
    @extend .d-inline-block,
            .position-static;
  }

  .ui-corner-all,
  .ui-datepicker-header {
    @extend .d-flex,
            .align-items-center,
            .justify-content-center;
  }

  .ui-datepicker-header {
    @extend .py-2;
  }

  .pi-chevron-left,
  .pi-chevron-right,
  .pi-chevron-up,
  .pi-chevron-down {
    @extend .d-block,
            .p-2,
            .w-100;
    background-repeat: no-repeat;
    background-position: center;
    height: 1.5em;
  }

  .pi-chevron-left  { background-image: $arrow-left;}
  .pi-chevron-right { background-image: $arrow-right;}
  .pi-chevron-up    { background-image: $arrow-up;}
  .pi-chevron-down  { background-image: $arrow-down;}

  .ui-datepicker-prev,
  .ui-datepicker-next {
    @extend .px-1;
    @include size(1.8em);
    @include border-radius($x-calendar-border-radius);

    &:hover,
    &:focus {
      @extend %cursor-pointer;
      background-color: $x-calendar-bg-date-hover;
    }
  }

  .ui-datepicker-prev {
    @extend .mr-auto,
            .ml-2,
            .order-1;
  }

  .ui-datepicker-next {
    @extend .ml-auto,
            .mr-2,
            .order-3;
  }

  .ui-datepicker-title {
    @extend .order-2,
            .text-center,
            .text-uppercase;
    color: $x-calendar-text-primary;
    min-width: 60%;

    .ui-datepicker-month,
    .ui-datepicker-year {
      @extend .px-1;
    }

    select {
      @extend .custom-select;

      &.ui-datepicker-month {
        @extend .mr-1;
        width: 55%;

      }

      &.ui-datepicker-year {
        width: 35%;
      }
    }
  }

  .ui-datepicker-buttonpane {
    background-image: none;

    button {
      @extend .w-auto,
              .m-1,
              .p-1,
              .overflow-visible,
              %cursor-pointer;

      float: right;

      &.ui-datepicker-current {
        float: left;
      }
    }
  }

  .ui-datepicker-buttonbar {
    @extend .p-3;

    .ui-button-secondary {
      @extend .x-btn-outline-default,
              %cursor-pointer;
    }

    .ui-g {
      @extend .d-flex,
              .align-items-center,
              .justify-content-between;
    }

    > .ui-g > div {
      @extend .p-0;

      &:last-child {
        @extend .text-center;
      }
    }
  }

  // tables
  table {
    @extend .w-100;
    border-collapse: collapse;

    th {
      @extend .p-1,
              .text-center,
              .border-0;
      font-weight: $font-weight-bold;
    }

    td {
      @extend .border-0;
    }

    td span,
    td a {
      @extend .d-block,
              .py-1,
              .px-3,
              .text-center;
      text-decoration: none;
      border-radius: $x-calendar-border-radius;

      &.ui-state-default{
        color: $x-calendar-text-default;

        &:hover:not(.ui-state-active),
        &:focus:not(.ui-state-active) {
          background-color: $x-calendar-bg-date-hover;
        }
      }

      &.ui-state-disabled & {
        color: $x-calendar-text-disabled;
      }

      &.ui-state-active {
        background-color: $x-calendar-bg-date-active;
        color: $x-calendar-text-active;
      }
    }
  }
}


/* with multiple calendars */
.ui-datepicker-multi {

  &.ui-datepicker-multi {
    @extend .w-auto;
  }

  .ui-datepicker-group {
    @extend .float-left;

    table {
      width: 95%;
      margin: 0 auto;
    }

    .ui-datepicker-multi-2 & {
      width: 50%;
    }

    .ui-datepicker-multi-3 & {
      width: 33.3%;
    }

    .ui-datepicker-multi-4 & {
      width: 25%;
    }
  }

  .ui-datepicker-buttonpane {
    clear: left;
  }
}


.ui-datepicker-row-break {
  @extend .w-100;
  clear: both;
  font-size: 0;
}


/* time picker */
.ui-timepicker {
  @extend .text-center,
          .py-1;
  min-width: 10.750em;

  > div {
    @extend .d-inline-block;
    min-width: 1.5em;

    a {
      @extend .d-block;
      opacity: 0.7;
      filter:Alpha(Opacity=70);

      &:hover {
        @extend .d-block;
        opacity: 1;
        filter:Alpha(Opacity=100);
      }
    }
  }

  a {
    @extend .d-block,
            .w-100;
  }

  > .ui-separator {
    min-width: .75em;

    a {
      @extend .invisible;
    }
  }
}