"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.timeInput = exports.suffixButton = exports.wheelSeparator = exports.wheelsContainer = exports.wheelHighlight = exports.wheelItem = exports.wheelPadder = exports.wheelFocusRing = exports.wheelWrapper = exports.wheelViewport = exports.VISIBLE_ITEMS = exports.ITEM_HEIGHT_PX = void 0;
const theme_1 = require("../../../theme");
const ITEM_HEIGHT_PX = 200;
exports.ITEM_HEIGHT_PX = ITEM_HEIGHT_PX;
const VISIBLE_ITEMS = 5;
exports.VISIBLE_ITEMS = VISIBLE_ITEMS;
const wheelViewport = {
    "position": "relative",
    "height": (0, theme_1.dimensionsPxToRem)(ITEM_HEIGHT_PX * VISIBLE_ITEMS),
    "width": (0, theme_1.dimensionsPxToRem)(360),
    "overflowY": "scroll",
    "scrollSnapType": "y mandatory",
    "scrollbarWidth": "none",
    "WebkitMaskImage": "linear-gradient(to bottom, transparent 0%, transparent 10%, black 45%,"
        + " black 55%, transparent 90%, transparent 100%)",
    "maskImage": "linear-gradient(to bottom, transparent 0%, transparent 10%, black 45%,"
        + " black 55%, transparent 90%, transparent 100%)",
    "overscrollBehavior": "contain",
    "&::-webkit-scrollbar": {
        display: "none",
    },
    "&:focus": {
        outline: "none",
    },
};
exports.wheelViewport = wheelViewport;
const wheelWrapper = {
    position: "relative",
    display: "flex",
};
exports.wheelWrapper = wheelWrapper;
const wheelFocusRing = {
    position: "absolute",
    top: "50%",
    left: 0,
    right: 0,
    height: (0, theme_1.dimensionsPxToRem)(ITEM_HEIGHT_PX),
    transform: "translateY(-50%)",
    pointerEvents: "none",
    border: `${(0, theme_1.borderPxToRem)(2)} solid transparent`,
    borderRadius: (0, theme_1.dimensionsPxToRem)(16),
    boxSizing: "border-box",
    transition: "border-color 0.15s",
};
exports.wheelFocusRing = wheelFocusRing;
const wheelPadder = {
    height: (0, theme_1.dimensionsPxToRem)(ITEM_HEIGHT_PX * 2),
};
exports.wheelPadder = wheelPadder;
const wheelItem = {
    height: (0, theme_1.dimensionsPxToRem)(ITEM_HEIGHT_PX),
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    scrollSnapAlign: "center",
    scrollSnapStop: "always",
    fontSize: (0, theme_1.fontPxToRem)(80),
    fontVariantNumeric: "tabular-nums",
    color: "$text",
    userSelect: "none",
    fontWeight: 500,
};
exports.wheelItem = wheelItem;
const wheelHighlight = {
    position: "absolute",
    top: "50%",
    left: 0,
    right: 0,
    height: (0, theme_1.dimensionsPxToRem)(ITEM_HEIGHT_PX),
    transform: "translateY(-50%)",
    pointerEvents: "none",
    borderTop: "1px solid $border",
    borderBottom: "1px solid $border",
};
exports.wheelHighlight = wheelHighlight;
const wheelsContainer = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: (0, theme_1.dimensionsPxToRem)(36),
    position: "relative",
};
exports.wheelsContainer = wheelsContainer;
const wheelSeparator = {
    fontSize: (0, theme_1.fontPxToRem)(80),
    color: "$text",
    fontWeight: 500,
    userSelect: "none",
    pointerEvents: "none",
};
exports.wheelSeparator = wheelSeparator;
const suffixButton = {
    "display": "flex",
    "alignItems": "center",
    "justifyContent": "center",
    "background": "none",
    "border": "none",
    "padding": (0, theme_1.dimensionsPxToRem)(24),
    "margin": `0 -${(0, theme_1.dimensionsPxToRem)(24)}`,
    "cursor": "pointer",
    "color": "$text",
    "&:disabled": {
        cursor: "not-allowed",
        opacity: 0.5,
    },
};
exports.suffixButton = suffixButton;
const timeInput = {
    fontVariantNumeric: "tabular-nums",
    letterSpacing: "0.05em",
    caretColor: "$mainColor",
};
exports.timeInput = timeInput;
//# sourceMappingURL=TimePicker.css.js.map