.pos {
    background: $gray-900;
    --btn-height-size: 54px;
    direction: ltr;
    padding: 0;
    margin: 0;
    background-color: #f0eeee;
    color: $o-gray-900;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    text-shadow: none;
}

* {
    touch-action: pan-x pan-y;
}
/*  ********* Generic element styling  ********* */

.dvh-100 {
  // we specify the 100vh as a fallback in case the browser does not
  // know dvh
  height: 100vh !important;
  height: 100dvh !important;
}

.pos a {
    text-decoration: none;
    color: $gray-700;
}

.pos li {
    list-style-type: none;
}

/* --- Generic Restyling and Resets --- */

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: sans-serif;
}

.pos .oe_invisible{
    visibility: hidden !important;
}
.pos .clearfix:after {
    content:" ";
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    clear: both;
}

.pos input::-webkit-outer-spin-button,
.pos input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media screen and (max-width: 575px) {
    .pos .modal-dialog{
        margin: 0;
        max-height: 92dvh;
    }
    .pos .modal-content{
        max-height: 92dvh;
        border-radius: 1rem 1rem 0 0;
        animation: popUp 0.2s ease-in-out forwards;
    }
    .pos .modal-body{
        overflow: auto;
    }
    .pos .modal-dialog-centered {
        position: fixed;
        inset: auto 0 0 0;
        min-height: unset;
    }
}

@keyframes popUp {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.pos .o_error_detail {
    user-select: text;
}

// .o-default-button would be hidden with web assets, but the dialog css file excluded from pos
// as o-default-button is used inside custom pos dialogs, only apply it to form dialogs
.o_dialog:has(.o_form_view) {
    button.o-default-button:not(:only-child) {
        display: none;
    }
}