@import './variables';
@import './icons';

// override index for implementation inside a modal: https://github.com/HealthCatalyst/Fabric.Cashmere/issues/867
$cdk-z-index-overlay-container: $zindex-cdk-overlay;
$cdk-z-index-overlay: $zindex-cdk-overlay;
$cdk-z-index-overlay-backdrop: 1000 !default;

// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

// Default backdrop animation is based on the Material Design swift-ease-out.
$backdrop-animation-duration: 400ms !default;
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;

// Include overlay styles
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
    // Disable events from being captured on the overlay container.
    pointer-events: none;

    // The container should be the size of the viewport.
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

// The overlay-container is an invisible element which contains all individual overlays.
.cdk-overlay-container {
    position: fixed;
    z-index: $cdk-z-index-overlay-container;

    &:empty {
        // Hide the element when it doesn't have any child nodes. This doesn't
        // include overlays that have been detached, rather than disposed.
        display: none;
    }
}

// We use an extra wrapper element in order to use make the overlay itself a flex item.
// This makes centering the overlay easy without running into the subpixel rendering
// problems tied to using `transform` and without interfering with the other position
// strategies.
.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: $cdk-z-index-overlay;
}

// A single overlay pane.
.cdk-overlay-pane {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $cdk-z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

.cdk-overlay-backdrop {
    // TODO(jelbourn): reuse sidenav fullscreen mixin.
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: $cdk-z-index-overlay-backdrop;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
    opacity: 0;

    &.cdk-overlay-backdrop-showing {
        opacity: 1;

        // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
        // this file will be copied to the top-level `cdk` package when putting together the files
        // for npm. Any relative import paths we use here will become invalid once the file is copied.
        .cdk-high-contrast-active & {
            // In high contrast mode the rgba background will become solid
            // so we need to fall back to making it opaque using `opacity`.
            opacity: 0.6;
        }
    }
}

.cdk-overlay-dark-backdrop {
    background: $cdk-overlay-dark-backdrop-background;
}

.cdk-overlay-transparent-backdrop {
    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
    // capturing the user's mouse scroll events. Since we also can't use something like
    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
    // all and using `opacity` to make the element transparent.
    &,
    &.cdk-overlay-backdrop-showing {
        opacity: 0;
    }
}

// Overlay parent element used with the connected position strategy. Used to constrain the
// overlay element's size to fit within the viewport.
.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: $cdk-z-index-overlay;

    // We use `display: flex` on this element exclusively for centering connected overlays.
    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
    // flex layout.
    display: flex;

    // We use the `column` direction here to avoid some flexbox issues in Edge
    // when using the "grow after open" options.
    flex-direction: column;

    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
    min-width: 1px;
    min-height: 1px;
}

// Used when disabling global scrolling.
.cdk-global-scrollblock {
    position: fixed;

    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
    // that the element had before we made it `fixed`.
    width: 100%;

    // Note: this will always add a scrollbar to whatever element it is on, which can
    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
    // block scrolling on a page that doesn't have a scrollbar in the first place.
    overflow-y: scroll;
}

.hc-menu-panel {
    position: relative;
    font-family: $default-font-family;
    display: flex;
    flex-direction: column;
    padding: 5px 16px;
    margin: -12px;
    background-color: $white;
    border-radius: 4px;

    .hc-divider {
        width: auto;
        margin: 5px 0;
    }
}

.hc-divider.hc-menu-item {
    margin: 5px -16px;
}

button.hc-menu-item:not(.hc-button),
a.hc-menu-item:not(.hc-button) {
    @include fontSize(14px);
    font-family: $default-font-family;
    color: $offblack;
    padding: 6px 16px;
    margin: 0 -16px;
    border: 0;
    background: 0 0;
    text-align: left;
    display: flex;
    align-items: center;

    &[disabled] {
        opacity: 0.5;
    }

    &:active,
    &:hover {
        color: $offblack;
    }

    &:focus:not([disabled]) {
        background-color: tint($blue, 70%);
        color: $offblack;
        cursor: pointer;
        box-shadow: none;
        outline: none;
    }

    &.hc-menu-item-submenu {
        padding-right: 40px;
    }

    &.hc-menu-item-submenu:after {
        content: '';
        background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5BcnRib2FyZCAxPC90aXRsZT48cGF0aCBpZD0iUGF0aF8xMjIyMSIgZGF0YS1uYW1lPSJQYXRoIDEyMjIxIiBjbGFzcz0iY2xzLTEiIGQ9Ik0xOS42NCwxNS4yOWExLDEsMCwwLDAtLjMyLS43NkwxMS44Miw3QTEuMDYsMS4wNiwwLDAsMCwxMCw3Ljc5djE1YTEuMDgsMS4wOCwwLDAsMCwxLjA3LDEuMDcsMS4wNSwxLjA1LDAsMCwwLC43NS0uMzJsNy41LTcuNUExLDEsMCwwLDAsMTkuNjQsMTUuMjlaIi8+PC9zdmc+');
        position: absolute;
        width: 20px;
        height: 20px;
        right: 10px;
    }

    .hc-menu-icon {
        font-size: 16px;
        height: 16px;
        width: 16px;
        margin-right: 14px;
    }

    .hc-menu-sub-text {
        flex: 1 0 auto;
        margin-left: 15px;
        color: $gray-300;
        text-align: right;

        hc-icon {
            margin-right: 0;
            color: $offblack;
        }
    }
}

.hc-elip-menu {
    transform: rotate(90deg);
    background-color: transparent;
    background-image: url($ico-elip-gray-600);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    height: 22px;
    width: 28px;
    padding: 0;
    border-radius: 4px;
    border: 2px solid transparent;

    &:hover {
        background-color: rgb(0 0 0 / 15%);
        background-image: url($ico-elip-black);
    }

    &:focus {
        outline: none;
        border: 2px solid $blue;
    }
}