@import "../../../_common/scss/main";

.FlyOutMenu {
    transform: translateZ(0);

    &__container {
        &--hidden,
        &--animate {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 1010;
        }

        &--hidden {
            transition: background-color 200ms
                    cubic-bezier(0.075, 0.82, 0.165, 1),
                z-index 50ms linear 0.2s;
            background-color: rgba(0, 0, 0, 0);
            z-index: -1;
        }

        &--animate {
            transition: background-color 400ms
                cubic-bezier(0.075, 0.82, 0.165, 1);
            background-color: rgba(0, 0, 0, 0.6);
        }

        .SocialLinks {
            &__Links {
                margin-top: $gutter-large;
                padding-left: 6px;

                &__Link {
                    margin-right: $gutter-extra-large;

                    &__Icon {
                        font-size: 28px;
                        color: $gray-social-icon;
                    }
                }
            }
        }
    }

    &__close {
        position: absolute;
        top: $gutter;
        left: $gutter;
        background: none;
        border: none;
        color: $blue-primary;
    }

    &__logo {
        text-align: right;

        &Wrapper {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: -#{$gutter-small};
        }

        &__powered {
            font-size: 7px;
            font-weight: 800;
            color: $legal-text-color;
            margin-right: $gutter-small;
        }

        &__icon {
            color: $primary-color;

            &.icon-delivery-logo {
                font-size: 25px;
            }
            &.icon-ddot {
                font-size: 18px;
            }
        }

        &__image {
            position: absolute;
            max-width: 85px;
            max-height: 35px;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    &__wrapper {
        display: flex;
        flex-direction: column;
        position: absolute; // position: fixed seems to cause scrolling issues on iOS Safari
        width: 270px;
        height: 100%;
        z-index: 1011;
        top: 0;
        left: 0;
        background-color: #fff;
        box-sizing: border-box;
        padding: $gutter $gutter-large;
        overflow-x: hidden;
        border-radius: 0;

        &--hidden {
            transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
            transform: translateX(-100%);
        }

        &--animate {
            transition: transform 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
            transform: translateX(0%);
        }

        .AccountOptions {
            margin-bottom: $gutter-large;

            &__content {
                &__subOptionsList {
                    margin-top: $gutter;
                }

                &__subOptionsContainer {
                    &--show {
                        width: auto;
                        display: flex;
                        flex-basis: 100%;
                        flex-direction: column;
                        padding: 0 0 0 ($gutter-extra-large + $gutter);
                        margin-left: -#{$gutter-large};
                        margin-right: -#{$gutter-large};
                        background-color: $flyout-menu-suboptions-background;
                    }
                }

                &__subOption {
                    margin-bottom: $gutter-small;
                }

                &__option,
                &__option__icon {
                    font-size: $primary-font-size;
                }

                &__option {
                    margin-top: $gutter-small;
                    flex-wrap: wrap;

                    &__arrowIcon {
                        font-size: 8px;
                    }

                    &__icon {
                        &.icon-catering {
                            font-size: 17px;
                        }
                    }

                    &__ribbon {
                        top: 5px;

                        @media (max-width: $site-width-mobile-new) {
                            top: 0;
                        }
                    }
                }

                &__header {
                    display: flex;
                    align-items: center;

                    &__img {
                        height: 24px;
                        width: 24px;

                        &.icon-profile {
                            font-size: 24px;
                            margin-right: 8px;
                        }
                    }

                    &__summary {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        &__name:not(:only-child) {
                            color: $active-text-color;
                            margin: 0;
                        }

                        &__credit {
                            color: $lighter-active-text-color;
                        }
                    }
                }

                .FlyOutMenu__logo {
                    margin-bottom: 32px;
                }
            }
        }

        @include tablet {
            padding: $gutter-large;
        }
    }

    &__content {
        flex: 0 0 auto;
    }

    &__ribbon {
        &__new {
            background-color: $promo-floating-pill-background;
            color: $white;
            font-size: $font-size-small;
            padding: 4px $gutter;
            position: absolute;
            right: $gutter-large;
            line-height: 1;
            text-transform: uppercase;
            border-radius: 10px;
            top: 1px;
        }
    }
}

.FlyOutHeader,
.FlyOutFooter {
    &__container {
        display: flex;
        flex-direction: column;
    }

    &__wrapper {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    &__button,
    &__foot {
        line-height: 32px;
        margin: $gutter-large -20px 0 -60px;
        padding: 0 $gutter-large 0 60px;

        &:hover {
            background-color: rgba($blue-secondary, 0.1);
            text-decoration: none;
        }

        @include mobile-only {
            line-height: $font-line-height-h3;
        }
    }

    &__link {
        color: $primary-color;

        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        &.hide {
            @include iphone5 {
                display: none;
            }
        }
    }

    &__button {
        color: $primary-color;
        outline: none;
        background: none;
        border: none;
        text-align: left;
    }
}

.FlyOutHeader {
    &__container {
        margin-bottom: $gutter-extra-large;
    }
}