.picker { &.rounded { border-radius: var(--default-borderradius); } & .picker-actions { flex: 0 0 auto; display: flex; padding: 8px; align-items: center; justify-content: flex-end; & > :not(:first-child) { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: unset; } } } .picker-inline { display: flex; flex: 1 1 auto; position: relative; max-width: 100%; &.picker-input-button { & .input, .input .input-root { cursor: pointer } &.disabled { & .input, .input .input-root { cursor: default; } } } &.picker-input-text { cursor: text; &:hover { cursor: text; } &.disabled { cursor: default; &:hover { cursor: default; } } } } .picker-static { display: flex; overflow: hidden; min-width: 310px; flex-direction: column; } .picker-container { display: flex; flex-direction: column; border-radius: inherit; &.picker-container-landscape { flex-direction: row; } & .toolbar { border-top-left-radius: inherit; border-top-right-radius: inherit; } } .picker-popover-paper { outline: 0; z-index: calc(var(--zindex-popover) + 1); position: absolute; min-width: 16px; min-height: 16px; overflow-x: hidden; overflow-y: auto; } .picker-view { display: none; margin-top: 20px; &.picker-open { display: block; animation: animation-fadein 251ms; } } .picker-content { display: flex; //max-width: 325px; max-width: 100%; min-width: 310px; min-height: 305px; overflow: hidden; flex-direction: column; justify-content: center; &.picker-content-landscape { padding: 0 8px; } } .picker-toolbar { height: 100px; display: flex; align-items: center; flex-direction: row; justify-content: center; &.picker-toolbar-landscape { height: auto; padding: 8px; max-width: 150px; justify-content: flex-start; } &.button-root { padding: 0; min-width: 16px; text-transform: none; } } .picker-inline-paper { .paper { position: relative !important; } } .picker-hidden { visibility: hidden; } .picker-pos-top { top: 0px; position: fixed; visibility: visible; &.picker-pos-left { left: 10px; } &.picker-pos-right { right: 10px; } } .picker-pos-above { bottom: 0px; visibility: visible; &.picker-pos-left { left: 50%; transform: translateX(-50%); } &.picker-pos-right { right: 0px; } } .picker-pos-bottom { bottom: 10px; position: fixed; visibility: visible; &.picker-pos-left { left: 10px; } &.picker-pos-right { right: 10px; } } .picker-pos-below { visibility: visible; &.picker-pos-left { left: 50%; transform: translateX(-50%); } &.picker-pos-right { right: 0px; } }