/* This styles are used to override the default primeng styles for calendar (https://www.primefaces.org/primeng/#/calendar).*/

/* $icon-margin-right: defines the margin-right of the arrow buttons.*/
$icon-margin-right: 10px;
/* $icon-margin-left: defines the margin-left of the arrow buttons.*/
$icon-margin-left: 40px;

p-calendar {

  .p-calendar {
    input::-ms-clear {
      display: none;
    }

    .icon-calendar {
      height: 100%;
      color: black;
      cursor: pointer;
    }

    .icon-clock {
      height: 100%;
      color: black;
      cursor: pointer;
    }

  }

  &.input-expand-height {
    input {
      height: 100% !important;
    }
  }

  &.warning-date {
    input {
      background-color: var(--danger) !important;
    }

    &.input-expand-height {
      height: 100% !important;
    }

    i {
      color: black !important;
    }
  }

  &.date-error {
    input {
      color: var(--danger) !important;
      border: 1px solid var(--danger) !important;
    }

    &.input-expand-height {
      height: 100% !important;
    }

    i {
      color: var(--danger) !important;
    }
  }

  &.is-disabled {
    .p-state-disabled, .p-widget:disabled {

    }

    .p-calendar {
      input {
        opacity: 0.6;
        cursor: not-allowed !important;
        background-color: #e9ecef;
      }

      &.input-expand-height {
        height: 100% !important;
      }

      //i {
      //opacity: 0.5;
      //}
    }

    .p-datepicker-header {
      background: $medium-gray;
    }

    .p-datepicker-calendar {

      tbody {
        tr {
          td {
            a, span {
              &.p-state-active {
                background-color: $medium-gray !important;
              }
            }
          }
        }
      }
    }

  }
}

.p-datepicker-inline {
  flex-direction: column;
  border: 1px solid var(--slab_component_border_color) !important;
}

.slab-custom-calendar {
  padding: 0 !important;
}

.slab-custom-calendar-footer {
  background-color: $light-gray;
  padding: 1rem !important;
}

.slab-custom-calendar-header {
  border-top: 1px solid $light-gray;
  background: white !important;
  color: $darker-gray !important;
  padding: 15px;
  height: 65px !important;
  a {
    cursor: pointer;
    color: var(--primary) !important;
    border: 1px solid var(--primary);
    border-radius: 35px;
    width: 35px;
    height: 35px;
    line-height: 32px !important;
    text-align: center;
    margin: 0 !important;
    &#next-month{
      margin-right: 10px !important;
    }
    &#previous-month{
      margin-left: 10px !important;
    }
    &:hover {
      text-decoration: none;
      background: var(--primary) !important;
      color: white !important;
    }
  }
  .slab-custom-calendar-title {
    font-size: 20px;
  }
}

body {
  .p-datepicker {
    width: 450px !important;
    margin-top: 10px;
    table {
        margin: 0 !important;
      }
    .p-datepicker-title {
      width: 100%;
      height: 65px;;
    }

    .icon-angle-double-right {
      position: absolute;
      float: right;
      right: 15px;
    }

    .icon-angle-right {
      position: absolute;
      float: right;
      right: 65px;
    }

    .icon-angle-double-left {
      position: absolute;
      float: left;
      left: 15px;
    }

    .icon-angle-left {
      position: absolute;
      float: left;
      left: 65px;
    }
  }

  .slab-datepicker-header {
    display: flex;
    height: 65px;
    align-items: center;
    a {
      cursor: pointer;
      color: var(--text-color) !important;
      border: 1px solid var(--primary);
      border-radius: 35px;
      width: 35px;
      height: 35px;
      line-height: 32px !important;
      text-align: center;
      margin: 0 !important;
      &#next-month{
        margin-right: 10px !important;
      }
      &#previous-month{
        margin-left: 10px !important;
      }
      &:hover {
        text-decoration: none;
        background: var(--primary) !important;
        color: white !important;
      }
    }
  }

  .slab-custom-calendar .slab-custom-calendar-table thead {
    background: white !important;
    border-top: 1px solid #eee;
    width: 35px !important;
    height: 35px !important;
    line-height: 32px !important;
  }
  .slab-custom-calendar .disabled-cell {
    background: white !important;
  }

}

.p-datepicker {
  color: var(--ag-data-color);
  background-color: var(--slab_background_primary) !important;
  z-index: 100000 !important;
  font: normal $slab-base-body-font-size $slab-base-body-font-family;
  border-color: var(--slab_component_border_color) !important;
  border-radius: $slab-border-radius !important;
  padding: 0 !important;

  div:nth-child(3) {
    padding: 15px !important;
    background-color: var(--slab_modal_bottom_background);
    border-color: var(--slab_component_border_color) !important;
    border-bottom-right-radius: $slab-border-radius;
    border-bottom-left-radius: $slab-border-radius;
  }

  .p-datepicker-title, .p-datepicker-header {
    display: none;
  }

  .p-datepicker-header {
    font-weight: normal !important;
    padding: 15px 15px 0 15px !important;
  }
  .p-datepicker-prev, .p-datepicker-next {
    border: 1px solid var(--primary) !important;
    color: var(--text-color) !important;
    &:hover {
      text-decoration: none;
      background: var(--primary) !important;
      color: white !important;
    }
  }

  thead {
    text-align: center;
    border-top: 1px solid var(--slab_component_border_color);
    border-bottom: 1px solid var(--slab_component_border_color);
    th {
      font-weight: normal;
    }
  }

  td {
    padding: 5px !important;

    a, span {
      border-radius: 30px !important;

      &:hover,
      &:active {
        color: black;
        border: 1px solid $medium-gray;
        background-color: $medium-gray !important;
      }

      &.p-state-highlight {
        background-color: $slab-selected-background-color !important;
      }

      &.p-state-active,
      &.p-highlight {
        background-color: var(--primary) !important;
        border: 1px solid var(--primary);
      }
    }
  }

}

systelab-datepicker {
  margin-right: 5px;


  .p-inputtext {
    padding: .25em;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 100%;
    height: $form-elements-height;
    border: 1px solid var(--slab_component_border_color);
    font: normal $slab-base-body-font-size $slab-base-body-font-family;

    &:focus {
      border-color: $slab-focus-component-border-color !important;
      box-shadow: $slab-focus-component-shadow !important;
    }

    &:hover:enabled:not(:focus) {
      border-color:  var(--slab_component_border_color) !important;
    }

  }


  &.custom-height {
    p-calendar {
      height: 100%;

      .p-calendar {
        height: 100%;
      }

      &.input-expand-height {
        input {
          height: 100% !important;
        }
      }
    }
  }
}

systelab-date-time {
  &.custom-height {
    p-calendar {
      height: 100%;

      .p-calendar {
        height: 100%;
      }

      &.input-expand-height {
        input {
          height: 100% !important;
        }
      }
    }

    label {
      margin: auto;
      margin-left: 1px;
      margin-right: 1px;
    }
  }

  systelab-spinner {
    width: 81px;
  }
}