// Sheet
// ===


// Root
// ---
//
// 1. We disable pointer-events on the div that contains the Sheet
//    Reenable them here so the user can interact with the Sheet
//    For more info, see https://github.com/mobify/progressive-web-sdk/pull/1187

.pw-sheet {
    pointer-events: all; // 1
}


// Sheet Wrapper
// ---
//
// 1. Hide the tap hightlight when clicked. For example, when
// `pw--shrink-to-content` is active.

.pw-sheet__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    justify-content: center;

    outline: 0;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 1
}


// Sheet Inner
// ---
//
// 1. Set content to always scroll because of iOS issue.
// 2. Necessary in order for point 1 to work... not sure why, really.

.pw-sheet__inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    overflow-y: auto; // 1
    flex-direction: column;
    flex: 1 1 auto;

    background-color: white;

    -webkit-overflow-scrolling: touch;

    &.pw--shrink-to-content {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        flex: 0 0 auto;
    }

    &::after {
        content: '';

        display: block;
        width: 2px; // 1, 2
        height: 2px; // 1
        margin-bottom: -2px; // 1
    }
}


// Sheet Content
// ---
//
// 1. This is necessary to ensure that the scroll fix on `pw-sheet__inner` works
//    when `pw-sheet__content` spans the full height (i.e. `pw--shrink-to-content`
//    is not enabled)

.pw-sheet__content {
    flex: 1 1 auto; // 1
}


// Sheet Mask
// ---
//
// Should this be a separate component a la Shade?

.pw-sheet__mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;

    opacity: 0;
    background-color: black;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}