/*
Copyright 2018 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
.mx_AutoHideScrollbar {
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/*
2. webkit also supports overflow:overlay where the scrollbars don't take any space
in the layout but they don't autohide, so do that only on hover
*/
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
    overflow-y: hidden;
}

body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
    overflow-y: overlay;
}
/*
3. as a last fallback, compensate for the scrollbar taking up space in the layout
by playing with the paddings. the default below will add a right padding
of the scrollbar width and clear that on hover.
this won't work well on classes that also need to set their padding,
so this needs to be overriden and adjust the padding with calc like so:
```
body.mx_scrollbar_nooverlay .componentClass.mx_AutoHideScrollbar_overflow:hover {
    padding-right: calc(15px - var(--scrollbar-width)) !important;
}
```
*/
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar {
    box-sizing: border-box;
    overflow-y: hidden;
    padding-right: var(--scrollbar-width);
}

body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover {
    overflow-y: auto;
    padding-right: 0;
}