@use '../core/tokens/token-utils';
@use './m3-datetimepicker';

$fallbacks: m3-datetimepicker.get-tokens();

$time-font-size: 36px;
$time-input-width: 72px;
$time-input-height: 56px;
$time-seperator-width: 24px;
$time-ampm-width: 40px;

.mtx-time-view {
  display: block;
  outline: none;
  user-select: none;
}

.mtx-time-input-wrapper {
  padding: 8px 0;
  text-align: center;
}

.mtx-time-input-inner {
  display: inline-flex;
  height: $time-input-height;
}

.mtx-time-input {
  box-sizing: border-box;
  width: $time-input-width;
  height: 100%;
  padding: 0;
  font-size: $time-font-size;
  text-align: center;
  border: 2px solid transparent;
  appearance: none;
  outline: none;
  border-radius: token-utils.slot(datetimepicker-selector-container-shape, $fallbacks);
  background-color: token-utils.slot(datetimepicker-time-input-background-color, $fallbacks);
  color: token-utils.slot(datetimepicker-time-input-text-color, $fallbacks);

  &.mtx-time-input-active {
    background-color: token-utils.slot(datetimepicker-time-input-active-state-background-color, $fallbacks);
    color: token-utils.slot(datetimepicker-time-input-active-state-text-color, $fallbacks);

    &:focus {
      border-color: token-utils.slot(datetimepicker-time-input-focus-state-outline-color, $fallbacks);
      background-color: token-utils.slot(datetimepicker-time-input-focus-state-background-color, $fallbacks);

      &::placeholder {
        color: token-utils.slot(datetimepicker-time-input-focus-state-placeholder-text-color, $fallbacks);
      }
    }
  }

  &.mtx-time-input-warning {
    border-color: token-utils.slot(datetimepicker-time-input-warn-state-outline-color, $fallbacks);
  }
}

.mtx-time-seperator {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: $time-seperator-width;
  font-size: $time-font-size;
}

// AM/PM buttons
.mtx-time-ampm {
  display: inline-flex;
  flex-direction: column;
  margin-left: 12px;

  [dir='rtl'] & {
    margin-left: auto;
    margin-right: 12px;
  }

  .mtx-time-am,
  .mtx-time-pm {
    --mat-button-text-label-text-weight: 400;
    --mat-button-text-label-text-color: #{token-utils.slot(datetimepicker-time-ampm-text-color, $fallbacks)};
    --mat-button-text-container-shape: #{token-utils.slot(datetimepicker-selector-container-shape, $fallbacks)};

    flex: 1;
    width: $time-ampm-width;
    min-width: auto;
    border-width: 1px;
    border-style: solid;
    border-color: token-utils.slot(datetimepicker-time-ampm-outline-color, $fallbacks);

    &.mtx-time-ampm-active {
      --mat-button-text-label-text-weight: 500;
      --mat-button-text-label-text-color: #{token-utils.slot(datetimepicker-time-ampm-selected-state-text-color, $fallbacks)};

      background-color: token-utils.slot(datetimepicker-time-ampm-selected-state-background-color, $fallbacks);
    }

    .mat-mdc-button-touch-target {
      height: 100%;
    }
  }

  .mtx-time-am {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .mtx-time-pm {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 0;
  }
}

.mtx-time-button-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;

  .mat-mdc-button-base + .mat-mdc-button-base {
    margin-left: 8px;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: 8px;
    }
  }
}