import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    min-width: fit-content;
  }

  .timer__dropdown::part(panel) {
    background-color: var(--flow-ui-calendar-background-color);
    padding: var(--flow-ui-spacing-2x-small);
  }

  .timer {
    /* Balance top spacing with VCR button spacing */
    padding-top: var(--flow-ui-spacing-x-small);
    min-width: fit-content;
    font-family: var(--flow-ui-control-font-family);
  }

  .timer__dropdown {
    display: block;
  }

  .timer__date-time-container {
    display: grid;
    grid-template-columns: max-content 1fr max-content max-content;

    align-items: start;
    line-height: 16px;
    cursor: pointer;
  }

  .timer__date-time-container flow-ui-icon {
    color: var(--flow-ui-color-neutral-800);
  }

  .timer__date-container {
    margin-left: var(--flow-ui-spacing-x-small);
    display: flex;
    flex-direction: column;
  }

  .timer__day {
    font-size: var(--flow-ui-font-size-small);
    font-weight: var(--flow-ui-font-weight-bold);
  }

  .timer__date {
    font-size: var(--flow-ui-font-size-x-small);
  }

  .timer__time-container {
    margin-left: var(--flow-ui-spacing-2x-small);
    display: flex;
    flex-direction: column;
    align-items: start;
    min-width: 84px;
  }

  .timer__time {
    font-size: var(--flow-ui-font-size-large);
  }

  .timer__zone {
    font-size: var(--flow-ui-font-size-2x-small);
  }

  .timer__vcr-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .timer__vcr-controls flow-ui-icon-button:first-of-type::part(base) {
    padding-left: 0;
  }

  .timer__vcr-controls flow-ui-icon-button:last-of-type::part(base) {
    padding-right: 0;
  }

  .timer__calendar {
    width: 100%;
  }

  .timer__calendar::part(base) {
    width: 100%;
  }
`;

export { styles as default };
