/**
 * 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.
*/

.tivo-number-keypad-widget {
    /* Widget level styles go here */

    width: 100%;

    $keypad_btn_size: 1rem;

    .alphabet {
      font-size: 22px;
      font-style: normal;
    }

    .enter-key {
      font-size: 22px !important;
    }

    .empty-change {
      &:before {
        content: "\00a0";
      }
    }

    .space {
      &:before {
        content: "SPACE";
      }
    }

    .abc {
      &:before {
        content: "ABC";
      }
    }

    .def {
      &:before {
        content: "DEF";
      }
    }

    .ghi {
      &:before {
        content: "GHI";
      }
    }

    .jkl {
      &:before {
        content: "JKL";
      }
    }

    .mno {
      &:before {
        content: "MNO";
      }
    }

    .pqrs {
      &:before {
        content: "PQRS";
      }
    }

    .tuv {
      &:before {
        content: "TUV";
      }
    }

    .wxyz {
      &:before {
        content: "WXYZ";
      }
    }

    .ch5-button--label,
    .ch5-button--icon {
      color: black;
    }

    .ch5-button .cb-btn {
      padding: 0;
    }

    $myButtonPressed: #fafafa;

    .ch5-button--pressed {
      background-color: $myButtonPressed !important;
      border-color: $myButtonPressed !important;
      opacity: 0.7;
      transform: scale(0.9);
    }

    .complete-table {
      width: 100%;
    }

    .row>.col,
    .row>[class^="col-"] {
      padding: 0 !important;
    }

    $myButton: #fff;

    .ch5-button {
      background-color: $myButton;
      border-color: $myButton;
      transition: all 0.1s ease-in;
      box-shadow: none;
    }

    .each-row-cell {
      padding: 0;
    }

    @import "./../../../../assets/scss/controlled-sources/buttons";

    // 1070 Panel, 1060 Panel
    @media only screen and (device-width: 1280px) {
      .ch5-button {
        width: 75px;
      }

      .alphabet {
        font-size: 22px;
      }

      .ch5-button--label {
        font-size: 42px;
      }

      .enter-key .ch5-button--label {
        font-size: 26px;
      }
    }

    // 760 Panel
    @media only screen and (device-width: 1261px) {
      .ch5-button {
        width: 75px;
      }

      .ch5-button--label {
        font-size: 42px;
      }

      .alphabet {
        font-size: 22px;
      }

      .enter-key .ch5-button--label {
        font-size: 26px;
      }
    }

    // 560 Panel
    @media only screen and (device-width: 640px) {
      .ch5-button {
        width: 35px;
      }

      .ch5-button--label {
        font-size: 12px;
      }

      .alphabet {
        font-size: 16px;
      }

      .enter-key .ch5-button--label {
        font-size: 16px;
      }
    }
}