import styled, { css } from 'styled-components';
import { mix, rgba, transparentize } from 'polished';
import { defaultThemeProp } from '../../../theme';
import { tryCatch } from '../../../utils';
import Button from '../../Button';
import { readableColor } from '../../../styles';
export const StyledPick = styled(Button)(props => {
    const { theme: { base: { 'border-radius': borderRadius, palette: { interactive, dark }, spacing }, components: { card: { background }, 'form-control': { 'foreground-color': foreground } } } } = props;
    const textColor = tryCatch(() => readableColor(interactive));
    const disabledBackground = tryCatch(() => transparentize(0.5, mix(0.8, background, dark)));
    return css `
    height: 2.625rem;
    border-radius: calc(0.5 * ${borderRadius});
    padding: 0 ${spacing};
    background-color: transparent;
    border-color: transparent;
    color: ${foreground};

    &[aria-selected]:enabled {
      background-color: ${interactive};
      color: ${textColor};
    }

    &:disabled {
      background-color: ${disabledBackground};
      border-radius: 0;
    }
  `;
});
StyledPick.defaultProps = defaultThemeProp;
export const StyledColumnLabel = styled.span `
  text-align: center;
  margin: 0 auto;
  font-size: 0.75rem;
`;
StyledColumnLabel.defaultProps = defaultThemeProp;
export const StyledDay = styled(StyledPick)(props => {
    const { theme: { base: { palette: { interactive }, 'disabled-opacity': disabledOpacity }, components: { 'form-control': { 'foreground-color': foreground } } }, current, highlighted, dayInNexOrPrevMonth } = props;
    const highlightedBgColor = tryCatch(() => rgba(interactive, 0.1));
    return css `
    background-color: ${highlighted ? highlightedBgColor : 'transparent'};
    border: transparent;
    color: ${foreground};

    ${highlighted &&
        css `
      border-radius: 0;
    `}

    ${dayInNexOrPrevMonth &&
        css `
      opacity: ${disabledOpacity};
    `}

    ${current &&
        css `
      font-weight: bold;
    `}
  `;
});
StyledDay.defaultProps = defaultThemeProp;
export const StyledWeekLabel = styled(StyledColumnLabel)(props => {
    const { theme: { base: { spacing, breakpoints } } } = props;
    return css `
    margin-inline-end: 0;

    @media (min-width: ${breakpoints.sm}) {
      margin-inline-end: ${spacing};
    }
  `;
});
StyledWeekLabel.defaultProps = defaultThemeProp;
export const StyledWeekNumber = styled.span(props => {
    const { theme: { base: { breakpoints, spacing, 'disabled-opacity': disabledOpacity, palette: { dark } }, components: { card: { background: cardBackground } } } } = props;
    const background = tryCatch(() => transparentize(0.5, mix(0.8, cardBackground, dark)));
    return css `
    line-height: 2.625rem;
    padding: 0;
    margin-inline-end: 0;
    background-color: ${background};
    display: inline-block;
    opacity: ${disabledOpacity};

    @media (min-width: ${breakpoints.sm}) {
      padding: 0 ${spacing};
      margin-inline-end: ${spacing};
    }
  `;
});
StyledWeekNumber.defaultProps = defaultThemeProp;
export const StyledWeekGrid = styled.table(props => {
    const { theme: { base: { spacing } } } = props;
    return css `
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;

    thead {
      th {
        padding-bottom: ${spacing};
      }
    }
    ${StyledPick} {
      margin-inline-end: ${spacing};
    }
  `;
});
StyledWeekGrid.defaultProps = defaultThemeProp;
export const StyledCalendar = styled.table(props => {
    const { theme: { base: { 'border-radius': borderRadius, spacing } } } = props;
    return css `
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;

    th {
      max-width: 2.625rem;
    }

    thead {
      th {
        padding-bottom: ${spacing};
      }
    }

    td {
      width: 2.625rem;
      max-width: 2.625rem;

      ${StyledDay} {
        width: 100%;
      }
    }

    tr {
      &:first-child {
        ${StyledWeekNumber} {
          border-radius: calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;
        }
      }
      &:last-child {
        ${StyledWeekNumber} {
          border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});
        }
      }
    }
  `;
});
StyledCalendar.defaultProps = defaultThemeProp;
//# sourceMappingURL=Calendar.styles.js.map