/*
 * Modified by Justin Jäger for the Unfolded.Tools Remote Simulator.
 * Modified: 2026-08-03.
 * GNU GPL v3.0 only; see MODIFICATIONS.md.
 */
@use "../base/mixins";
@use "../vars/variables";

.datepicker {
  &__background {
    position: fixed;
    content: "";
    left: -100vw;
    top: -100vh;
    width: 200vw;
    height: 300dvh;
    height: 300dvh;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    // z-index: 2500;
    z-index: var(--uc-vselect-z-index);
  }

  &__value {
    @include mixins.body-extrasmall;
    display: flex;
    padding: 0.625rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--uc-buttons-tertiary-button-tertiary-text);
    border: 1px solid var(--uc-buttons-tertiary-button-tertiary-bg);

    &__clear {
      display: flex;
      width: 1.25rem;
      height: 1.25rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 0.625rem;
      background: var(--uc-bg-bg-surface-2);
    }
  }
}

// vue-datepicker >= 13 renamed its internal classes from dp__snake_case to
// dp--kebab-case. Centering is handled by the `centered` prop (.dp--centered
// on the teleported .dp--menu-wrapper), so no position override is needed.
.dp--menu.dp--theme-dark {
  @include mixins.body-small;
  border-color: var(--uc-background);
  border-radius: 1rem;
  background: var(--uc-background);
  padding: 1.25rem;
  outline: none;

  &:focus,
  &:active {
    outline: none;
    border-color: var(--uc-background);
  }

  .dp--header-wrap {
    margin-bottom: 0.5rem;
  }

  .dp--month-year-wrap {
    height: 1.625rem;
    justify-content: center;

    > .dp--arrow-btn-nav {
      width: 1.625rem;
      height: 1.625rem;

      .dp--inner-nav {
        font-family: var(--uc-font-family-icons) !important;
        font-feature-settings: "liga";
        font-size: 0.975rem;
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 0.8125rem;
        background-color: var(--uc-buttons-secondary-button-secondary-bg);
        border-color: var(--uc-buttons-secondary-button-secondary-bg);
        color: var(--uc-buttons-secondary-button-secondary-text);
        transition: all variables.$transition-bg-timing;

        @media (pointer: fine) {
          &:hover {
            background-color: var(
              --uc-buttons-secondary-button-secondary-hover-bg
            );
            border-color: var(--uc-buttons-secondary-button-secondary-hover-bg);
            color: var(--uc-buttons-secondary-button-secondary-hover-text);
          }
        }

        svg {
          display: none;
        }
      }

      &:first-child {
        .dp--inner-nav {
          &:before {
            content: "arrow_back";
          }
        }
      }

      &:last-child {
        .dp--inner-nav {
          &:before {
            content: "arrow_forward";
          }
        }
      }
    }

    .dp--month-year-select {
      @include mixins.body-large;
      color: var(--uc-white);
      align-items: center;
      width: fit-content;
      max-width: fit-content;

      &:first-child {
        justify-content: flex-end;
        padding-right: 0.25rem;
      }

      &:last-child {
        justify-content: flex-start;
        padding-left: 0.125rem;
      }

      @media (pointer: fine) {
        &:hover {
          background: transparent;
        }
      }
    }
  }

  .dp--calendar {
    margin: 0.625rem 0 1.25rem;
  }

  .dp--calendar-header {
    justify-content: flex-start;
    color: var(--uc-white);
  }

  .dp--calendar-header-item {
    @include mixins.body-small;
    width: 2.125rem;
    height: 2.125rem;
    display: flex;
    align-items: center;
    color: var(--uc-white);
    line-height: 1.5;
    padding: 0.625rem 0;
    justify-content: center;
    margin-left: 0.625rem;

    &:first-child {
      margin-left: 0;
    }
  }

  .dp--calendar-header-separator {
    background: rgba(255, 255, 255, 0.1);
  }

  .dp--menu-inner {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.25rem;
  }

  .dp--calendar-row {
    margin: 0.3125rem 0;
    // gap: 0.625rem;

    .dp--today {
      border-color: transparent;
    }

    .dp--calendar-item {
      @include mixins.body-small;
      display: flex;
      justify-content: center;
      color: var(--uc-white);
      margin-left: 0.625rem;

      &:first-child {
        margin-left: 0;
      }
    }

    .dp--cell-inner {
      width: 2.125rem;
      height: 2.125rem;
      border-radius: 0.5rem;

      @media (pointer: fine) {
        &:hover {
          background-color: var(--uc-buttons-tertiary-button-tertiary-hover-bg);
          border-color: transparent;
          color: var(--uc-buttons-tertiary-button-tertiary-hover-text);
        }
      }
    }

    .dp--cell-offset {
      color: rgba(255, 255, 255, 0.5);
    }

    .dp--active {
      color: var(--uc-background);
      background: var(--uc-foreground);
    }
  }

  .dp--time-picker-inline-container {
    & > .dp--flex {
      width: 100%;
    }
  }

  .dp--time-display {
    @media (pointer: fine) {
      &:hover {
        background-color: var(
          --uc-buttons-secondary-button-secondary-hover-bg
        ) !important;
        border-color: var(
          --uc-buttons-secondary-button-secondary-hover-bg
        ) !important;
        color: var(
          --uc-buttons-secondary-button-secondary-hover-text
        ) !important;
      }
    }
  }

  .dp--time-input {
    width: 100%;

    .dp--time-col {
      padding: 0 0.625rem;
      &:first-child,
      &:last-child {
        width: calc(50% - 0.625rem);
        padding: 0;
        border: 0;

        .dp--time-display {
          @include mixins.body-large;
          width: 100%;
          padding: 0.5rem 0;
          border-radius: 0.5rem;
          border: 1px solid var(--uc-theme-color-30);
          color: var(--uc-white);
        }
      }
    }

    .dp--pm-am-button {
      background-color: var(--uc-buttons-secondary-button-secondary-bg);
      border-color: var(--uc-buttons-secondary-button-secondary-bg);
      color: var(--uc-buttons-secondary-button-secondary-text);
      transition: all variables.$transition-bg-timing;

      @media (pointer: fine) {
        &:hover {
          background-color: var(
            --uc-buttons-secondary-button-secondary-hover-bg
          );
          border-color: var(--uc-buttons-secondary-button-secondary-hover-bg);
          color: var(--uc-buttons-secondary-button-secondary-hover-text);
        }
      }
    }

    .dp--inc-dec-button-inline {
      display: none;
    }
  }

  .dp--action-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1.25rem;
    padding: 1.25rem 0 0;

    .dp--selection-preview {
      display: none;
    }

    .dp--action-buttons {
      width: 100%;
      margin: 0;
      flex: 1;
      justify-content: space-between;
      gap: 1.875rem;
    }

    .dp--action-button {
      @include mixins.button-label;
      height: 2.375rem;
      padding: 0.125rem 1rem;
      border-radius: 1.875rem;
      width: 100%;
      flex: 1;
      margin: 0;
      background-color: transparent;
      border: 2px solid var(--uc-buttons-tertiary-button-tertiary-bg);
      color: var(--uc-buttons-tertiary-button-tertiary-text);
      transition: all variables.$transition-bg-timing;

      &.dp--action-cancel {
        @media (pointer: fine) {
          &:hover {
            background-color: var(
              --uc-buttons-tertiary-button-tertiary-hover-bg
            );
            border-color: var(--uc-buttons-tertiary-button-tertiary-hover-bg);
            color: var(--uc-buttons-tertiary-button-tertiary-hover-text);
          }
        }
      }

      &.dp--action-select {
        background-color: var(--uc-buttons-secondary-button-secondary-bg);
        border-color: var(--uc-buttons-secondary-button-secondary-bg);
        color: var(--uc-buttons-secondary-button-secondary-text);

        @media (pointer: fine) {
          &:hover {
            background-color: var(
              --uc-buttons-secondary-button-secondary-hover-bg
            );
            border-color: var(--uc-buttons-secondary-button-secondary-hover-bg);
            color: var(--uc-buttons-secondary-button-secondary-hover-text);
          }
        }
      }
    }
  }

  .dp--overlay {
    .dp--overlay-cell {
      @include mixins.body-small;
      color: var(--uc-text-text-primary);

      @media (pointer: fine) {
        &:hover {
          background-color: var(--uc-buttons-tertiary-button-tertiary-hover-bg);
          border-color: transparent;
          color: var(--uc-buttons-tertiary-button-tertiary-hover-text);
        }
      }

      &-active {
        background-color: var(--uc-background);
      }
    }

    .dp--overlay-action {
      color: var(--uc-text-text-primary);

      @media (pointer: fine) {
        &:hover {
          background-color: var(--uc-buttons-secondary-button-secondary-bg);
        }
      }
    }
  }
}

.datepicker-spacer {
  display: flex;
  justify-content: center;
  color: var(--uc-text-text-primary);
  font-size: 1.5rem;
  width: 2.5rem;
  margin: 0 0.625rem;

  @media screen and (max-width: variables.$bp-phone) {
    margin: 0;
  }
}