@gfazioli/mantine-picker/dist/styles.css

Picker component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.

:where([data-mantine-color-scheme=light]) .me_9f396aa1{--picker-fade-edge-color:var(--mantine-color-white);--picker-divider-color:var(--mantine-color-gray-4);--picker-highlight-color:var(--mantine-color-gray-1);--picker-text-color:var(--mantine-color-black);--picker-text-color-dim:var(--mantine-color-gray-6)}:where([data-mantine-color-scheme=dark]) .me_9f396aa1{--picker-fade-edge-color:var(--mantine-color-dark-7);--picker-divider-color:var(--mantine-color-dark-4);--picker-highlight-color:var(--mantine-color-dark-6);--picker-text-color:var(--mantine-color-white);--picker-text-color-dim:var(--mantine-color-gray-5)}.me_9f396aa1{border-radius:inherit;font-variant-numeric:tabular-nums;height:var(--picker-height,200px);overflow:hidden;perspective:var(--picker-perspective,300px);position:relative;user-select:none;width:100%}.me_9f396aa1[data-disabled]{cursor:not-allowed;opacity:.5}.me_9f396aa1[data-focused=true]{outline:2px solid var(--mantine-primary-color);outline-offset:2px}.me_9f396aa1[data-3d=true]{perspective:var(--picker-perspective,300px);transform-style:preserve-3d}.me_9f396aa1[data-readonly]{cursor:default}.me_63089546{border-radius:var(--mantine-radius-md);height:100%;overflow:hidden;position:relative;width:100%}.me_3dcdc8c6,.me_63089546{align-items:center;display:flex}.me_3dcdc8c6{color:var(--picker-text-color);font-weight:500;height:var(--picker-item-height,40px);justify-content:center;padding:0 8px;position:absolute;top:50%;transform:translateY(-50%);user-select:none;z-index:4}.me_3dcdc8c6[data-position=left]{left:8px}.me_3dcdc8c6[data-position=right]{right:8px}.me_1174a222{align-items:center;cursor:grab;display:flex;flex-direction:column;height:100%;justify-content:center;position:relative;transform:rotateY(var(--picker-rotate-y,0deg));transform-origin:center center;transform-style:preserve-3d;width:100%}.me_1174a222[data-dragging=true]{cursor:grabbing}.me_1174a222[data-disabled=true]{cursor:not-allowed}.me_1174a222[data-3d=true]{transform-style:preserve-3d}.me_1174a222[data-readonly=true]{cursor:default}.me_9f3564d2{align-items:center;backface-visibility:hidden;box-sizing:border-box;color:var(--picker-text-color-dim);display:flex;font-weight:500;justify-content:center;padding:0 10px;position:absolute;text-align:center;transform-style:preserve-3d;transition:transform var(--picker-animation-duration) var(--picker-animation-easing),opacity var(--picker-animation-duration) var(--picker-animation-easing),filter var(--picker-animation-duration) var(--picker-animation-easing);width:100%;will-change:transform,opacity}.me_9f3564d2[data-dragging=true],.me_9f3564d2[data-momentum=true],.me_9f3564d2[data-wheeling=true]{animation:none!important;transition:none!important;will-change:transform}.me_9f3564d2[data-selected=true]{color:var(--picker-text-color);font-weight:600}.me_9f3564d2[data-3d=true]{backface-visibility:hidden;transform-origin:center center;transform-style:preserve-3d}.me_9f36f0ab{bottom:0;top:0;z-index:1}.me_9f36f0ab,.me_9f36f0ab:after,.me_9f36f0ab:before{left:0;pointer-events:none;position:absolute;right:0}.me_9f36f0ab:after,.me_9f36f0ab:before{content:"";height:var(--picker-mask-height,45%);z-index:2}.me_9f36f0ab:before{background:linear-gradient(to bottom,var(--picker-fade-edge-color) var(--picker-mask-intensity,60%),hsla(0,0%,100%,0) 100%);top:0}.me_9f36f0ab:after{background:linear-gradient(to top,var(--picker-fade-edge-color) var(--picker-mask-intensity,60%),hsla(0,0%,100%,0) 100%);bottom:0}.me_158e255{background-color:var(--picker-highlight-color);border-radius:var(--mantine-radius-sm);height:var(--picker-item-height,40px);top:50%;transform:translateY(-50%);z-index:0}.me_158e255,.me_592142b9{left:0;pointer-events:none;position:absolute;right:0}.me_592142b9{bottom:0;top:0;z-index:3}.me_592142b9:after,.me_592142b9:before{background-color:var(--picker-divider-color);content:"";height:1px;left:0;position:absolute;right:0;z-index:3}.me_592142b9:before{top:calc(50% - var(--picker-item-height, 40px)/2)}.me_592142b9:after{bottom:calc(50% - var(--picker-item-height, 40px)/2)}.me_5101a03b{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}