.device-detail-drawer {
  &__connect-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  &__connect-picker {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;

    &.is-new {
      grid-template-columns: 1fr;
    }
  }

  &__connect-areas,
  &__connect-targets,
  &__connect-config {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__connect-area-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 8px;
  }

  &__connect-targets {
    min-width: 0;
  }

  &__connect-device-list {
    overflow-y: auto;
    padding-right: 8px;
  }

  &__connect-picker.is-existing {
    .device-detail-drawer__connect-area-list,
    .device-detail-drawer__connect-device-list {
      max-height: calc(80vh - 260px);
      overflow-y: auto;
    }
  }

  &__connect-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
  }

  &__connect-section-desc,
  &__connect-help {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }

  &__connect-area,
  &__connect-device-card,
  &__connect-model-card,
  &__connect-option,
  &__connect-summary-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fff;
  }

  &__connect-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 64px;
    padding: 12px;
    cursor: pointer;

    &.is-active {
      border-color: #1677ff;
      background: #e6f4ff;
    }
  }

  &__connect-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  &__connect-current {
    margin-top: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: #1677ff;
    border-radius: 4px;
    background: #fff;
  }

  &__connect-workarea-name {
    font-weight: 600;
  }

  &__connect-filters,
  &__connect-two-columns,
  &__connect-option-grid,
  &__connect-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  &__connect-picker.is-new &__connect-filters {
    grid-template-columns: 1fr auto auto;
  }

  &__connect-model-grid,
  &__connect-device-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  &__connect-picker.is-new &__connect-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  &__connect-model-card,
  &__connect-device-card {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 76px;
    height: auto;
    padding: 12px;
    text-align: left;
    white-space: normal;
    cursor: pointer;

    &.is-disabled {
      color: rgba(0, 0, 0, 0.25);
      background: #fafafa;
      cursor: not-allowed;
      opacity: 0.55;
    }

    > div > span {
      display: block;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  &__connect-device-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;

    &.is-smart {
      background: #e6f4ff;
      color: #1677ff;
    }

    &.is-dumb {
      background: #fffbe6;
      color: #faad14;
    }

    &.is-integrated {
      background: #eef7e8;
      color: #389e0d;
    }
  }

  &__connect-model-card {
    align-items: flex-start;
    flex-direction: column;
    min-height: 168px;
  }

  &__connect-model-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  &__connect-model-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
  }

  &__connect-model-name {
    font-weight: 600;
  }

  &__connect-model-brand {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
  }

  &__connect-model-desc {
    font-size: 12px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
  }

  &__connect-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    span {
      padding: 0 6px;
      font-size: 11px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: #fff;
    }
  }

  &__connect-summary {
    align-items: stretch;
    grid-template-columns: 1fr auto 1fr;

    > .anticon {
      align-self: center;
      justify-self: center;
    }
  }

  &__connect-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 88px;
    padding: 12px;
    background: #fafafa;

    > div {
      min-width: 0;
    }

    &.is-smart {
      background: #f0f7ff;
      border-color: #d6e4ff;
    }

    &.is-dumb {
      background: #fffdf0;
      border-color: #ffe7ba;
    }

    > div > span {
      display: block;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  &__connect-summary-desc {
    display: -webkit-box !important;
    margin-top: 4px;
    overflow: hidden;
    font-size: 12px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  &__connect-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
  }

  &__connect-new-info {
    display: flex;
    flex-direction: column;
  }

  &__connect-new-info &__connect-two-columns {
    grid-template-columns: minmax(2, 1fr) 260px;
    align-items: start;
  }

  &__connect-new-info .pisell-lowcode-select,
  &__connect-new-info .ant-select,
  &__connect-new-info .ant-input,
  &__connect-new-info input {
    width: 100%;
  }

  &__connect-label {
    margin-top: 4px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.72);
  }

  &__connect-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    width: 100%;
    padding: 12px;
    margin-inline-end: 0;
    cursor: pointer;

    > span:not(.ant-radio):not(.pisell-lowcode-radio) {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    &.ant-radio-wrapper-checked,
    &.pisell-lowcode-radio-wrapper-checked {
      border-color: var(--primary-600, #7f56d9);
      background: var(--Primary-50, #f9f5ff);
    }
  }
}