/**
 * Copyright (C) 2020 to the present, Crestron Electronics, Inc.
 * All rights reserved.
 * No part of this software may be reproduced in any form, machine
 * or natural, without the express written consent of Crestron Electronics.
 * Use of this source code is subject to the terms of the Crestron Software License Agreement 
 * under which you licensed this source code.  
 *
 * This code was automatically generated by Crestron's code generation tool.
*/

$highlightColor: #1b2a57;
$defaultColor: #9299ac;

#horizontal-present-page {
    /* Page level styles go here */
    width: 100%;
    height: 100%;

    .active-label {
        color: rgb(27, 42, 87);
        font-weight: bold;
    }

    .present-content-title-wrapper {
        font-size: calc(3.5rem + 1vw);
        color: $highlightColor;
    }

    ch5-list {
        width: auto !important;

        .ch5-list-horizontal {
            text-align: center;

            .list-item {
                background-color: transparent;
                border: none;
                padding-top: 40px;

                .horizontal-present-menu {
                    .ch5-button {
                        height: 24vh;

                        &.ch5-button--selected {
                            .ch5-button--label {
                                color: $highlightColor;
                            }
                        }
                    }
                    .cb-btn {
                        .ch5-button--img {
                            width: auto;
                            height: calc(8rem + 1vw);
                        }
                        .ch5-button--label {
                            font-size: calc(1.8rem + 1vw);
                            color: $defaultColor;
                            word-break: break-all;
                            white-space: normal;
                            height: calc(5rem + 1vw);
                        }
                    }
                }
            }

            .image-text {
                text-align: center;
                font-size: calc(0.7rem + 1vw);
                color: rgb(148, 151, 156);
                padding-top: 7px;

                label {
                    font-size: calc(1.15rem + 0.5vw);
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .scrollbar-container {
            background-color: transparent;
        }

        ch5-button {
            width: 100%;
            height: 100%;

            .ch5-button--label {
                font-size: calc(1.2rem + 1vw);
                color: rgb(27, 42, 87);
                font-weight: normal;
            }
            .ch5-button--selected {
                .ch5-button--label {
                    color: rgb(27, 42, 87);
                    font-weight: bold;
                }
            }

            div {
                width: 100%;
                height: 17vh;
                border: none;
                background-color: transparent;
                display: flex;
                align-items: center;
                justify-content: center;

                &:focus,
                &:active {
                    outline: none;
                }

                button {
                    &.cb-btn {
                        width: 100%;
                        height: 100%;
                        margin: 0px auto;

                        .ch5-button--img {
                            width: calc(6.6rem + 1vw);
                            height: calc(6.6rem + 1vw);
                        }
                    }
                }
            }

            .ch5-button--pressed {
                background-color: transparent;
            }
        }

        .stop-btn {
            display: none;

            ch5-button {
                div {
                    background-color: transparent;
                    height: 14vh;

                    button {
                        &.cb-btn {
                            margin: 0px auto;

                            .ch5-button--label {
                                font-size: calc(1.4rem + 1vw);
                            }
                            .ch5-button--img {
                                width: calc(4.1rem + 1vw);
                                height: calc(4.1rem + 1vw);
                            }
                        }
                    }
                }
            }
        }
    }
}
