@use "../../style/variables" as *;

$dp: #{$prefix}-date-picker;

.#{$dp} {
  display: inline-flex;
  position: relative;
  width: 100%;
  font-size: var(--ty-picker-input-font-size);

  // ---- Input ----
  &__input {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: var(--ty-control-height-md, var(--ty-height-md));
    box-sizing: border-box;
    padding: var(--ty-picker-input-padding-md, 0 var(--ty-control-padding-inline-md, 12px));
    border: 1px solid var(--ty-picker-input-border);
    border-radius: var(--ty-picker-input-radius);
    background: var(--ty-picker-input-bg);
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;

    &:hover {
      border-color: var(--ty-picker-input-border-hover);
    }
  }

  &_open &__input {
    border-color: var(--ty-picker-input-border-focus);
    box-shadow: var(--ty-picker-input-shadow-focus);
  }

  &__input-field {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: var(--ty-picker-input-color);
    cursor: pointer;
    min-width: var(--ty-date-picker-input-min-width-md);

    &::placeholder {
      color: var(--ty-input-placeholder, var(--ty-picker-input-color-placeholder, var(--ty-color-text-placeholder)));
      opacity: 1;
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  &__suffix {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-picker-suffix-size);
    height: var(--ty-picker-suffix-size);
    margin-left: var(--ty-picker-suffix-gap);
    color: var(--ty-picker-suffix-color);
  }

  &__icon {
    display: inline-flex;
    font-size: 14px;
  }

  &__clear {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: var(--ty-picker-suffix-size);
    color: var(--ty-picker-clear-color);
    background: var(--ty-picker-clear-bg);
    cursor: pointer;
    border: none;
    padding: 0;

    &:hover {
      color: var(--ty-picker-clear-color-hover);
    }
  }

  &_has-value:hover &__clear {
    display: inline-flex;
  }

  // ---- Sizes ----
  &_sm &__input {
    height: var(--ty-control-height-sm, var(--ty-height-sm));
    padding: var(--ty-picker-input-padding-sm, 0 var(--ty-control-padding-inline-sm, 8px));
    font-size: var(--ty-control-font-size-sm, var(--ty-font-size-sm));
  }

  &_sm &__input-field {
    min-width: var(--ty-date-picker-input-min-width-sm);
  }

  &_lg &__input {
    height: var(--ty-control-height-lg, var(--ty-height-lg));
    padding: var(--ty-picker-input-padding-lg, 0 var(--ty-control-padding-inline-lg, 16px));
    font-size: var(--ty-control-font-size-lg, var(--ty-font-size-lg));
  }

  &_lg &__input-field {
    min-width: var(--ty-date-picker-input-min-width-lg);
  }

  // ---- Disabled ----
  &_disabled {
    opacity: 0.65;

    .#{$dp}__input {
      background: var(--ty-picker-input-bg-disabled);
      cursor: not-allowed;
      border-color: var(--ty-picker-input-border);

      &:hover {
        border-color: var(--ty-picker-input-border);
      }
    }
  }

  // ---- Dropdown ----
  &__dropdown {
    background: var(--ty-picker-dropdown-bg);
    border-radius: var(--ty-picker-dropdown-radius);
    box-shadow: var(--ty-picker-dropdown-shadow);
    width: 288px;
  }

  // ---- Header ----
  &__header {
    display: flex;
    align-items: center;
    padding: var(--ty-date-picker-header-padding);
    border-bottom: 1px solid var(--ty-date-picker-header-border);
  }

  &__header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-date-picker-header-button-size);
    height: var(--ty-date-picker-header-button-size);
    border: none;
    background: transparent;
    color: var(--ty-date-picker-header-button-color);
    cursor: pointer;
    font-size: 18px;
    border-radius: var(--ty-date-picker-header-button-radius);
    transition:
      color 0.2s,
      background-color 0.2s,
      box-shadow 0.2s;

    &:hover {
      color: var(--ty-date-picker-header-button-color-hover);
      background: var(--ty-date-picker-header-action-hover-bg);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--ty-date-picker-header-action-focus-ring);
    }
  }

  &__header-caption {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: var(--ty-date-picker-header-caption-gap);
  }

  &__header-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--ty-date-picker-cell-color);
    font-weight: var(--ty-date-picker-header-label-font-weight);
    font-size: var(--ty-date-picker-header-label-font-size);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--ty-date-picker-header-button-radius);
    transition:
      color 0.2s,
      background-color 0.2s,
      box-shadow 0.2s;

    &:hover {
      color: var(--ty-date-picker-header-button-color-hover);
      background: var(--ty-date-picker-header-action-hover-bg);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--ty-date-picker-header-action-focus-ring);
    }
  }

  // ---- Body / Table ----
  &__body {
    padding: var(--ty-date-picker-body-padding);
  }

  &__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
  }

  &__cell-header {
    font-weight: 400;
    color: var(--ty-picker-input-color-muted);
    padding: 4px 0;
    font-size: 12px;
  }

  // ---- Cell ----
  &__cell {
    padding: 2px 0;
    cursor: pointer;

    &_disabled {
      cursor: not-allowed;
    }
  }

  &__cell-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-date-picker-cell-size);
    height: var(--ty-date-picker-cell-size);
    border-radius: var(--ty-date-picker-cell-radius);
    transition: background 0.2s;
    color: var(--ty-date-picker-cell-color-muted);
    font-size: var(--ty-date-picker-cell-font-size);
  }

  &__cell_in-view &__cell-inner {
    color: var(--ty-date-picker-cell-color);
  }

  &__cell:hover &__cell-inner {
    background: var(--ty-picker-cell-hover-bg);
  }

  &__cell_today &__cell-inner {
    border: 1px solid var(--ty-date-picker-cell-today-border);
    color: var(--ty-date-picker-cell-today-border);
  }

  &__cell_selected &__cell-inner {
    background: var(--ty-date-picker-cell-selected-bg);
    color: var(--ty-date-picker-cell-selected-color);
    font-weight: 500;
  }

  &__cell_selected:hover &__cell-inner {
    background: var(--ty-date-picker-cell-selected-hover-bg);
  }

  &__cell_in-range,
  &__cell_in-preview-range {
    background: var(--ty-date-picker-range-bg);
  }

  &__cell_range-start,
  &__cell_range-end {
    background: var(--ty-date-picker-range-bg);
  }

  &__cell_range-start &__cell-inner,
  &__cell_range-end &__cell-inner {
    background: var(--ty-date-picker-cell-selected-bg);
    color: var(--ty-date-picker-cell-selected-color);
    font-weight: 500;
  }

  &__cell_in-preview-range &__cell-inner,
  &__cell_in-range &__cell-inner {
    background: transparent;
    color: var(--ty-date-picker-cell-color);
  }

  &__cell_range-start.#{$dp}__cell_in-preview-range &__cell-inner,
  &__cell_range-end.#{$dp}__cell_in-preview-range &__cell-inner,
  &__cell_range-start.#{$dp}__cell_in-range &__cell-inner,
  &__cell_range-end.#{$dp}__cell_in-range &__cell-inner {
    background: var(--ty-date-picker-cell-selected-bg);
    color: var(--ty-date-picker-cell-selected-color);
  }

  &__cell_disabled &__cell-inner {
    color: var(--ty-date-picker-cell-color-muted);
    background: var(--ty-date-picker-cell-disabled-bg);
  }

  &__cell_disabled:hover &__cell-inner {
    background: var(--ty-date-picker-cell-disabled-bg);
  }

  &__cell_dim &__cell-inner {
    color: var(--ty-date-picker-cell-color-muted);
  }

  &__month-table,
  &__year-table {
    border-collapse: separate;
    border-spacing: 0 var(--ty-date-picker-panel-item-gap-y);
  }

  &__month-cell,
  &__year-cell {
    padding: 0;
  }

  &__month-cell-inner,
  &__year-cell-inner {
    width: auto;
    min-width: var(--ty-date-picker-panel-item-min-width);
    height: var(--ty-date-picker-panel-item-height);
    padding: 0 var(--ty-date-picker-panel-item-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--ty-date-picker-panel-item-radius);
    color: var(--ty-date-picker-cell-color);
    font-weight: 500;
    transition:
      color 0.2s,
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s;
  }

  &__month-cell:hover &__month-cell-inner,
  &__year-cell:hover &__year-cell-inner {
    background: var(--ty-date-picker-panel-item-hover-bg);
  }

  &__month-cell.#{$dp}__cell_dim &__month-cell-inner,
  &__year-cell.#{$dp}__cell_dim &__year-cell-inner {
    color: var(--ty-date-picker-cell-color-muted);
    font-weight: 400;
  }

  &__month-cell.#{$dp}__cell_today &__month-cell-inner,
  &__year-cell.#{$dp}__cell_today &__year-cell-inner {
    border-color: var(--ty-date-picker-panel-item-current-border);
    color: var(--ty-date-picker-panel-item-current-color);
    background: transparent;
  }

  &__month-cell.#{$dp}__cell_selected &__month-cell-inner,
  &__year-cell.#{$dp}__cell_selected &__year-cell-inner {
    background: var(--ty-date-picker-panel-item-selected-bg);
    color: var(--ty-date-picker-panel-item-selected-color);
    font-weight: 600;
  }

  &__month-cell.#{$dp}__cell_selected:hover &__month-cell-inner,
  &__year-cell.#{$dp}__cell_selected:hover &__year-cell-inner {
    background: var(--ty-date-picker-panel-item-selected-hover-bg);
  }

  &__month-cell.#{$dp}__cell_selected.#{$dp}__cell_today &__month-cell-inner,
  &__year-cell.#{$dp}__cell_selected.#{$dp}__cell_today &__year-cell-inner {
    box-shadow: inset 0 0 0 1px var(--ty-date-picker-panel-item-current-border);
  }

  // ---- Footer ----
  &__footer {
    padding: var(--ty-date-picker-footer-padding);
    border-top: 1px solid var(--ty-date-picker-header-border);
    text-align: center;
  }

  &__today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ty-border-radius);
    background: transparent;
    color: var(--ty-date-picker-today-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--ty-date-picker-today-font-size);
    line-height: 1;
    appearance: none;
    transition:
      color 0.2s,
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s;

    &:hover {
      color: var(--ty-date-picker-today-color-hover);
      background: var(--ty-date-picker-today-hover-bg);
    }

    &:active {
      background: var(--ty-date-picker-today-active-bg);
    }

    &:focus-visible {
      outline: 2px solid var(--ty-date-picker-today-focus-ring);
      outline-offset: 2px;
    }
  }
}