/*
 * Datepicker
 * @define datepicker
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';
@use 'pikaday/scss/pikaday';

// Exposed variables
$theme: null !default;
$datepicker: null !default;

.ecl-datepicker {
  display: flex;
  margin: 0;
  position: relative;
  width: 100%;
}

.ecl-datepicker__field.ecl-text-input {
  padding-inline-end: var(--s-2xl);
  width: 100%;
}

.ecl-datepicker__icon {
  color: map.get($datepicker, 'input-icon-color');
  margin-inline-end: calc(var(--s-s) + 2px);
  margin-top: calc(var(--s-s) + 2px);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.ecl-datepicker__field[disabled] + .ecl-datepicker__icon {
  opacity: 0.5;
}

@include breakpoints.up('m') {
  .ecl-datepicker {
    width: map.get($theme, 'form-width', 's', 'breakpoint-m');
  }
}

@include breakpoints.up('l') {
  .ecl-datepicker {
    width: map.get($theme, 'form-width', 's', 'breakpoint-l');
  }
}

@include breakpoints.up('xl') {
  .ecl-datepicker {
    width: map.get($theme, 'form-width', 's', 'breakpoint-xl');
  }
}

/*
  * pikaday styling
  */
.ecl-datepicker-theme.pika-single {
  border-radius: map.get($datepicker, 'picker', 'border-radius');
  border-width: 0;
  box-shadow: map.get($datepicker, 'picker', 'shadow');
  color: map.get($datepicker, 'picker', 'theme-color');
  font: var(--f-m);
  margin-top: map.get($datepicker, 'picker', 'margin-top');
  overflow: hidden;
  padding: map.get($datepicker, 'picker', 'padding');
  width: auto;

  .pika-lendar {
    background-color: map.get($datepicker, 'picker', 'background-color');
    margin: 0;
    width: 100%;
  }

  .pika-title {
    background-color: map.get($theme, 'color', 'white');
    display: flex;
    padding-bottom: map.get($datepicker, 'picker', 'title-padding');
  }

  .pika-label {
    align-items: center;
    background-color: map.get($datepicker, 'picker', 'background-color');
    border: map.get($datepicker, 'picker', 'select-border');
    border-radius: map.get($datepicker, 'picker', 'border-radius');
    color: map.get($datepicker, 'picker', 'theme-color');
    display: flex;
    flex-basis: 50%;
    flex-grow: 1;
    font: var(--f-ui-m);
    justify-content: space-between;
    margin-inline-end: var(--s-xs);
    padding: var(--s-xs) var(--s-m);

    &:last-of-type {
      margin-inline-end: 0;
    }
  }

  .pika-label::after {
    border: solid map.get($datepicker, 'picker', 'theme-color');
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    margin-top: -6px;
    padding: 4px;
    transform: rotate(45deg);
  }

  .pika-select {
    border-width: 0;
    height: 100%;
    top: 0;
    width: 100%;
  }

  .pika-prev,
  .pika-next {
    display: none;
  }

  .pika-table {
    background-color: map.get($datepicker, 'picker', 'background-color');
    border-collapse: initial;
    border-spacing: map.get($datepicker, 'picker', 'table-spacing');

    thead {
      background-color: transparent;
    }

    th {
      color: map.get($datepicker, 'picker', 'theme-color');
      font: var(--f-xs);
      padding: var(--s-s) 0;
      text-transform: uppercase;
    }

    abbr {
      text-decoration: none;
    }

    tbody::before {
      background-color: transparent;
      content: '';
      display: block;
      height: map.get($datepicker, 'picker', 'thead-margin');
    }
  }

  .pika-button {
    background-color: map.get($theme, 'color', 'white');
    border-radius: map.get($datepicker, 'picker', 'border-radius');
    border-width: 0;
    color: map.get($datepicker, 'picker', 'theme-color');
    font: var(--f-m);
    padding: calc(var(--s-xs) + 2px) var(--s-xs);
    text-align: center;

    &:hover {
      background-color: map.get($datepicker, 'picker', 'day-hover-background');
      border-radius: map.get($datepicker, 'picker', 'border-radius');
      box-shadow: map.get($datepicker, 'picker', 'day-hover-shadow');
      color: map.get($datepicker, 'picker', 'theme-color');
      font-weight: map.get($theme, 'font-weight', 'bold');
    }
  }

  .is-today .pika-button {
    color: map.get($datepicker, 'picker', 'day-today-color');
    position: relative;

    &::before {
      background-color: map.get($datepicker, 'picker', 'day-today-color');
      border-radius: 2px;
      bottom: 4px;
      left: calc(50% - 10px);
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      width: 20px;
    }
  }

  .is-selected .pika-button {
    background-color: map.get($datepicker, 'picker', 'day-selected-background');
    border-radius: map.get($datepicker, 'picker', 'border-radius');
    box-shadow: none;
    color: map.get($theme, 'color', 'white');
  }

  .is-outside-current-month .pika-button {
    background-color: map.get($datepicker, 'picker', 'day-outside-background');
    color: map.get($datepicker, 'picker', 'day-outside-color');
    opacity: 1;

    &:hover {
      background-color: map.get($datepicker, 'picker', 'day-hover-background');
      color: map.get($datepicker, 'picker', 'theme-color');
    }
  }

  .is-today .pika-button:hover {
    color: map.get($datepicker, 'picker', 'theme-color');

    &::before {
      background-color: map.get($datepicker, 'picker', 'theme-color');
    }
  }

  .is-today.is-selected .pika-button {
    &:hover {
      color: map.get($theme, 'color', 'white');
    }

    &::before {
      background-color: map.get($theme, 'color', 'white');
    }
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('m') {
  .ecl-datepicker-theme.pika-single {
    .pika-lendar {
      width: calc(21.25rem - 2 * #{map.get($datepicker, 'picker', 'padding')});
    }
  }
}
