import styled, { css } from "styled-components";
import { Button } from "../Button/Button";
export const StyledNavBarButton = styled(Button).withConfig({
  displayName: "Styles__StyledNavBarButton",
  componentId: "sc-1owijsg-0"
})(["position:absolute;margin-top:1px;cursor:pointer;z-index:2;background-image:none;", " ", ""], props => props.$direction === "previous" && css(["right:auto;left:1px;"]), props => props.$direction === "next" && css(["right:1px;"]));
export const StyledMonths = styled.div.withConfig({
  displayName: "Styles__StyledMonths",
  componentId: "sc-1owijsg-1"
})(["top:30px;height:230px;", ""], {
  "position": "absolute",
  "left": "0px",
  "zIndex": "10",
  "display": "flex",
  "flexWrap": "wrap",
  "backgroundColor": "var(--page-paper-main)",
  "padding": "1.25rem"
});
export const StyledMonth = styled.div.withConfig({
  displayName: "Styles__StyledMonth",
  componentId: "sc-1owijsg-2"
})(["width:26%;transition-duration:0.3s;", " ", " ", " ", " ", ""], {
  "margin": "auto",
  "cursor": "pointer",
  "borderRadius": "1rem",
  "fontSize": "0.875rem",
  "lineHeight": "1.25rem",
  "fontWeight": "700"
}, props => !props.$isSelected ? css(["&:hover{background-color:var(--color-primary-300);}"]) : css(["", " background-color:var(--color-primary);"], {
  "color": "var(--color-theme-100)"
}), props => props.$isCurrent && !props.$isSelected && css(["", ""], {
  "color": "var(--color-primary)"
}), props => props.$isCurrent && props.$isSelected && css(["color:var(--color-theme-100);"]), props => props.$isCurrentQuarter && css(["background-color:var(--color-primary-300);"]));
export const StyledYearMonthPicker = styled.div.withConfig({
  displayName: "Styles__StyledYearMonthPicker",
  componentId: "sc-1owijsg-3"
})(["display:table-caption;margin-bottom:0.5rem;padding:0 0.5rem;", " &> div{font-weight:500;font-size:1.15rem;}"], {
  "textAlign": "center",
  "color": "var(--color-theme-900)"
});
export const StyledYearMonthPickerNavBar = styled.div.withConfig({
  displayName: "Styles__StyledYearMonthPickerNavBar",
  componentId: "sc-1owijsg-4"
})(["width:auto;margin:0 auto;"]);
export const StyledYearMonthPickerNavBarItem = styled.span.withConfig({
  displayName: "Styles__StyledYearMonthPickerNavBarItem",
  componentId: "sc-1owijsg-5"
})(["", " transition-duration:0.3s;display:inline-block;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
  "cursor": "pointer",
  "paddingLeft": "1rem",
  "paddingRight": "1rem"
});
StyledNavBarButton.displayName = "StyledNavBarButton";
StyledMonths.displayName = "StyledMonths";
StyledMonth.displayName = "StyledMonth";
//# sourceMappingURL=Styles.js.map