@import 'element:ef-calendar';
@import 'element:ef-icon';
@import 'element:ef-overlay';
@import 'element:ef-time-picker';
@import 'element:ef-text-field';

@import (reference) 'ef-text-field';

:host {
  @multiple: (7 * 4); // safe number day cols (7) and month cols (4)
  @calendar-width: (floor((@input-width / @multiple)) * @multiple); // safe width for perfect rendering
  line-height: @control-height;
  // #region - Extend from ef-text-field
  &:extend(:host);
  &:hover {
    &:extend(:host:hover);
  }
  &:active {
    &:extend(:host:active);
  }
  &[focused] {
    &:extend(:host[focused]);
  }
  &[warning] {
    &:extend(:host[warning] all);
  }
  &[error] {
    &:extend(:host[error] all);
  }
  &[disabled] {
    &:extend(:host[disabled]);
  }
  // #endregion

  [part='calendar'] {
    width: @calendar-width;
    padding: 0 calc((@input-width - @calendar-width) / 2);
  }

  [part='time-picker'] {
    margin: 0;
  }

  [part='timepicker-wrapper'] {
    // Show separator when there is slotted content.
    box-shadow: inset 0 @separator-width 0 0 @separator-color;
    padding: min(@control-padding);
  }

  &[range] {
    ef-text-field {
      text-align: center;
    }
  }

  [part='input'] {
    color: inherit;
  }

  [part='icon'] {
    color: @control-text-color;
  }

  [part='input-separator'] {
    line-height: @control-height;
    background: @global-text-color;
    width: 0.4em;
    margin: auto 0;
    height: 1px;
  }

  [part~='button'] {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex: none;
  }
}