@import "./public/common/css/style.less";

crouton-simple-toggle{
  width: @db-min-size;
  min-width: @db-min-size;
  height: @db-min-size;
  min-height: @db-min-size;
  display: table-row-group;

  crouton-card {
    text-align: center;
    color: @fc-regular;

    .expand {
      margin: @dashboard-card-padding;
      padding-top: @db-card-top-spacing;
    }
  }

  paper-toggle-button {
    --paper-toggle-button-checked-bar-color:  @button-normal;
    --paper-toggle-button-checked-button-color:  @button-normal;

    .toggle-container.paper-toggle-button {
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 2px;
    }
  }

  .textDisplay {
    font-size: @db-main-font-size;
    margin-bottom: @db-space-under-main-text;
  }

  .dimText {
    color: @fc-gray;
  }

  .toggle {
    font-size: @db-sub-font-size;
    color: @fc-gray;
    margin-top: 2px;

    .toggleButton {
      position: absolute;
      width: 100%;
      left: 0;

      paper-toggle-button.paper-toggle-button-0[checked]:not([disabled]){
          .toggle-bar.paper-toggle-button, .toggle-button.paper-toggle-button{
            background-color: @button-normal;
          }
      }

      .toggle-label {
        margin: 0px;
      }
    }
    .toggleTextLeft {
      float: left;
      width: 80px;
      text-align: right;
      line-height: 20px;
    }
    .toggleTextRight {
      float: right;
      width: 83px;
      text-align: left;
      line-height: 20px;
    }
  }

  .titleDisplay {
    font-size: @db-title-font-size;
    bottom: @db-title-bottom;
    left: 0px;
    width: 100%;
    position: absolute;
  }
}
