@import "./../styles/index.scss";

#setting-devices{
  .cptx-section-item{
    align-items: stretch;
    flex-direction: row;
    font-size: 13px;
    margin: 0 10%;
    min-width: 490px;
    width: 75%;

    > :nth-child(1) {
      width: 3%;
    }
    > :nth-child(2) {
      width: 20%;
    }
    > :nth-child(3) {
      width: 20%;
    }

    .device-icon {
      display: flex;
      align-items: center;
      font-size: 22px;
      align-content: center;

      i {
        color: #9b9b9b;
        font-size: 25px;
        margin: 0 auto;
      }
    }

    .device-name {
      display: flex;
      align-items: center;
      padding-left: 2%;
      
      span{
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
      }
    }

    .device-status {
      display: flex;
      align-items: center;
      padding-left: 5%;

      .current-device {
        color: #61b900;
        font-size: 12px;
        font-weight: 300;
      }

      .device-connection-data {
        span {
          &:nth-child(1) {
            font-weight: 600;
            margin-right: 6px;
          }
          &:nth-child(2) {
            color: #6c7280;
          }
        }
      }
    }

    button {
      align-items: center;
      background-color: transparent;
      color: #d94e47;
      cursor: pointer;
      display: flex;
      font-size: 12px;
      font-weight: 600;
      padding-left: 5%;
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_SETTINGS_DEVICES_ITEM_HOVER, $_COLOR_TEXT_SETTINGS_DEVICES_TITLE){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    #setting-devices{
      .cptx-section-item {
        &:hover{
          background-color: $_BACKGROUND_COLOR_SETTINGS_DEVICES_ITEM_HOVER;
        }
    
        .device-name {
          span{
            color: $_COLOR_TEXT_SETTINGS_DEVICES_TITLE;
          }
        }

        .device-status {
          .device-connection-data {
            span {
              &:nth-child(1) {
                color: $_COLOR_TEXT_SETTINGS_DEVICES_TITLE;
              }
            }
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_SETTINGS_DEVICES_ITEM_HOVER_LIGHT, $_COLOR_TEXT_SETTINGS_DEVICES_TITLE_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_SETTINGS_DEVICES_ITEM_HOVER_DARK, $_COLOR_TEXT_SETTINGS_DEVICES_TITLE_DARK);