@import "../_colors";
@import "../fonts";

body .p-calendar,
body .p-datepicker {
  display: inline-flex;
  width: 100%;

  &:has(.p-datepicker-dropdown) {
    .p-inputtext {
      border-radius: 4px 0 0 4px;
    }
  }

  .p-datepicker-dropdown {
    background-color: #fff;
    border-radius: 0 4px 4px 0;
    color: #212533;
    display: flex;
    gap: 0;
    min-width: 40px;
    border: 1px solid #c1c1cc;
    border-left: none;
  }

  &.p-disabled {
    opacity: 0.5;
  }

  &-day {
    padding: 8px;

    &-selected {
      background: #428bca;
      color: $default-color;
    }
  }

  &-time-picker {
    span {
      color: #212533;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
    }

    .p-iconwrapper {
      width: 20px;
    }

    svg {
      stroke-width: 2px;
      stroke: black;
      width: 20px;
    }
  }

  &-today {
    background: #eeebf2;
    color: #212533;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
  }

  &-input,
  &-panel {
    padding: 0.75em;
    background-color: $default-color;
    color: $primary-dark-text-color;
    border: 1px solid $default-primary-color;
    border-radius: 6px;

    &-panel-inline {
      padding: 0px;
    }

    td {
      &:hover {
        background-color: $selection-color;
      }
    }

    .p-datepicker-time-picker {
      span {
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        color: #212533;
      }
    }
  }

  &-panel:not(.p-datepicker-panel-inline) {
    z-index: 3200;
  }

  &-select-month,
  &-select-year {
    font-family: $open-sans;
    text-transform: uppercase;
    font-weight: 700;
  }

  &-other-month {
    color: $other-color;
  }

  &-calendar {
    border-collapse: separate;
    border-spacing: 10px;

    th {
      font-weight: normal;
    }
  }

  &-buttonbar {
    border-top: 1px solid $selection-color;
    padding-top: 5px;

    button {
      padding: 6px;
      background-color: $selection-color;
      border-radius: 4px;
      border: none;
    }
  }

  &-title > button:first-child {
    margin-right: 5px;
  }
}

body .p-timepicker {
  display: flex;
  justify-content: center;
  gap: 8px;
}

body
  .p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover,
body
  .p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
  background-color: $selection-color;
  font-weight: bold;
}

body .p-datepicker:has(input:focus) {
  .p-datepicker-dropdown {
    border: 2px solid #428bca;
  }
  input {
    border-right: none !important;
  }
}

body p-datepicker.ng-invalid.ng-dirty {
  .p-datepicker-dropdown {
    border-color: $error-color;
  }
}

body .p-datepicker-dropdown {
  border-width: 1px !important;
}