@import 'shared/colors';

.uofx-date-picker {
  display: inline-flex;
  align-items: center;
  width: 100%;
  border-radius: 5px;
  &.date-disabled {
    pointer-events: none;
    ion-item {
      background: get-color(gr-100);
      &::part(native) {
        --background: get-color(gr-100);
      }
    }
  }
  &.ng-invalid.ng-dirty {
    ion-input {
      border-color: get-color(red-700);
    }
  }
}

.u-datepicker {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
  --placeholder-color: #{get-color(bk-400)};
  --placeholder-font-weight: #{get-uofx-text-weight(r)};
  --placeholder-opacity: 1;

  .pick-icon {
    display: flex;
    margin-left: -30px;
    position: relative;
    z-index: 2;

    .pick-icon-inner {
      position: absolute;
      top: -8px;
    }

    .clear-icon-inner {
      position: absolute;
      top: -8px;
      margin-left: -28px;
    }
  }
}

ion-modal.u-datecalendar {
  --ion-background-color: transparent;
  --backdrop-opacity: var(--ion-backdrop-opacity) !important;
  &::first-line {
    backdrop-filter: blur(6px);
  }

  ion-content {
    --padding-top: 25vh;
    --padding-start: 12vw;
    --padding-end: 12vw;

    ion-datetime {
      border-radius: 8px;
    }
  }
}

.picker-highlight {
  ion-picker-internal {
    --wheel-highlight-background: transparent;
  }
}