@import "shared/mixins-and-vars";

// site specific hamburger menu styles
@default-menu-item-with-photo-width: 118px;
@default-menu-item-with-photo-horiz-padding: 5px;

#header {
    position: sticky;
    top: 0;
    z-index: 10001; // 10001 to be above able player
}

.enable-logo {
    text-decoration: none;
    text-align: center;
    width: 150px;
    min-height: 85px;
    display: flex;
    vertical-align: middle;
    a {
        display: flex;
        vertical-align: middle;
    }
    
    &--desktop {
        max-width: 100%;
        display: none;
    }

    &--mobile {
        height: 53px;
        margin-top: 15px;
    }

    

    @media @desktop {
        &--desktop {
            display: block; 
        }

        &--mobile {
            display: none;
        }
    }
}
.nav-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: @grey;
    padding: 0 10px;

    @media @desktop {
        padding: 0 30px;
    }

    &__level &__menu-item {
        display: inline-block;
        font-size: (14/@px);
        margin-right: 0;
    }
    
    &--desktop {
        max-width: 100%;
        display: none;
    }

    &--mobile {
        height: 53px;
        margin-top: 15px;
    }

    

    @media @desktop {
        &--desktop {
            display: block; 
        }

        &--mobile {
            display: none;
        }
    }
}

.plp {
    body:has(&) {
        h2 {
            margin-bottom: 10px;
        }
    }

    h1 {
        margin: 0 0 80px 0;
    }

    .page-list__title, h2 {
        font-size: (26 / @px);
        font-weight: bold;
        color: #222;
        padding: 20px 0;
        margin: 40px 0 79px;
        a {
            color: #000;
        }

        .enable__is-dark-mode & {
            &, & a {
                color: @dark-mode-white;
            }
        }
    }

    .plp-list {
        margin: 20px 0;
        padding: 0;
        display: flex;
        flex-direction: column;

        .item-wrapper {
            display: flex;
            margin-bottom: 25px;
            flex-direction: column;
            text-decoration: none;

            @media @tablet, @desktop {
                flex-direction: row;
            }

            .icon-wrapper {
                width: 100%;
                //min-height:288px;
                min-height: 250px;
                border-top: 5px solid @pink;
                text-align: center;
                padding: 10px 10px;
                background-color: #f5f7f5;
                @media @tablet, @desktop {
                    width: 33.33%;
                }

                .page-list__title, h2 {
                    display: block;
                    color: #000;
                    font-weight: bold;
                    font-size: (24 / @px);
                    padding: 40px 20px;
                    margin: auto;
                    border-bottom: none;
                }

                .icon {
                    min-height: 100px;

                    img[src="images/icons/controls/enscribe-audio-descriptions.svg"] {
                        height: 150px;

                        .enable__is-dark-mode & {
                            filter: invert();
                        }
                    }
                }

                img {
                    max-width: 100%;
                }
            }

            .links-wrapper {
                width: 100%;
                @media @tablet, @desktop {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 66.66%;
                    padding-left: 3rem;
                }

                p {
                    list-style-type: none;
                    padding: 26px 0;
                    margin: 0;
                }

                code {
                    font-size: (16 / @px);
                    color: @grey;
                }

                a {
                    font-size: (20.8 / @px);
                    color: #000;
                    font-family: helvetica;
                    font-weight: bold;
                    text-decoration: none;
                    display: inline-block;
                    margin: 16px 0;
                    padding: 10px 0;
                }

                a:hover {
                    color: @pink;
                }

                a.get-code {
                    position: relative;
                }

                .get-code:after {
                    content: " ";
                    width: 25px;
                    height: 25px;
                    background: url(/images/icons/components/link-to-external-site.svg);
                    position: absolute;
                    right: -34px;
                    top: -2px;
                }
            }
        }
    }
}

.sidemenu {
    display: top;
    float: left;
    margin-right: 50px;
    padding-right: 100px;
    width: 272px;
    
    &__title {
        border-bottom: none;
        margin-bottom: 15px;
        font-size: (20/@px);
        font-weight: bold;
    }
    &__item {
        border-bottom: none;
        font-size: (12/@px);
        
        a {
            text-decoration: none;
            color: @dark-grey;
        }

        @media @tablet-up {
            padding: 0 30px;
            margin-bottom: 0;
        }
    }

    &__link {
        color: #fff;
        text-decoration: none;
        display: inline-block;
        position: relative;
        margin: 10px 0;
    }

    &__text {
        display: block;
        position: absolute;
        display: inline-block;
        color: #fff;
        font-size: (59 / @px);
        padding-left: (20 / @px);
        top: (8 / @px);

        @media @tablet-up {
            font-size: (30 / @px);
            top: (15 / @px);
        }
    }

    &__sub-text {
        display: block;
        font-size: (17/@px);
        font-style: italic;
        padding: 0 10px;
        margin-top: -8px;
        font-style: normal;
    }
}

.enable-stats {
    @icon-width: (50 / @px);
    @npm-icon-width: (100 / @px);

    list-style-type: none;
    margin: 14px 0;
    padding: 0;
    border: solid 3px black;
    border-radius: (20 / @px);
    overflow: hidden;
    color: #000;
    text-align: center;

    .enable__is-dark-mode & {
        border-color: #aaa;
    }

    &__desc {
        min-height: (40 / @px);
        padding: 5px 20px;
        display: inline-block;
        position: relative;
        padding-left: @icon-width;

        @media @mobile {
            padding: 5px 10px 5px (@icon-width / 2);
        }

        &:only-child {
            width: 100%;
        }

        &--scratch {
            background-color: @color-scratch;

            .enable__is-dark-mode & {
                background-color: #313e32;
            }

            a {
                color: #7A4703;
                .enable__is-dark-mode & {
                    color: @light-orange;
                }
            }
        }

        &--integrate {
            background-color: @color-integrate;
        }

        &--do-not {
            background-color: @color-do-not;
        }

        &--style {
            background-color: @color-style;
        }

        &--npm {
            background-color: @color-npm;
        }
    }

    &__center {
        display: flex;
        /* justify-content: center; */
        min-height: (40 / @px);
        resize: vertical;
        align-items: center;
    }
    &__icon {
        height: (30 / @px);
        margin: 0px 15px 5px 0px;
        display: inline-block;
    }
    &__heading-icon {
        margin: 0 (15 / @px) 0 0;
    }

    &__label {
        display: inline-block;
        text-align: left;
    }
}

.screenshot-table {
    margin-bottom: 40px;
    thead th,
    td {
        text-align: center;
    }

    td {
        border: solid 1px black;
    }
}

.enable-flyout__open-menu-button {
    // margin-top: -3px;
}

.footer {

    &__links {
        font-size: (14/@px);
        font-weight: bold;
        
        a {
            display: block;

            @media @tablet-up {
                display: inline-block;
                margin-right: (30/@px);

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    &__attribution {
        font-size: small;
        max-width: 1024px;
        margin: 40px auto 0 auto;

        a {
            @media @tablet-up {
                display: inline-block;
            }
        }
    }
}

.enable__is-dark-mode {
    .plp .plp-list .item-wrapper .links-wrapper a {
        color: @dark-mode-white;
    }


    .plp .plp-list .item-wrapper .icon-wrapper {
        background-color: #444;

        .page-list__title, h2 {
            color: @dark-mode-white;
        }
    }

    .plp .plp-list .item-wrapper .links-wrapper code {
        color: #ddd;
    }

    .sidemenu__item {
        a {
            color: @dark-mode-white;
        }
    }

    .enable-stats {
        &__desc {
            color: @dark-mode-white;
        
        
            &--scratch {
                background-color: #313e32;
            }

            &--integrate {
                background-color: #7d5d12;

                a {
                    color: #FFD8A2;
                }
            }

            &--npm {
                background-color: #063934; 
            }
        
            &--do-not {
                background-color: #763f56;
            }
        
            &--style {
                background-color: #432155;
            }
        }

        &__icon {
            filter: invert();
        }

        &__heading-icon {
            filter: invert();
        }
    }
}