@use './colors';

@mixin all {
  .seam-device-details {
    .seam-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 0 24px 24px;

      &.seam-body-no-margin {
        margin: 0;
        gap: 0;
      }

      .seam-box {
        border: 1px solid colors.$text-gray-3;
        border-radius: 8px;

        .seam-content {
          padding: 12px 12px 12px 16px;

          &.seam-access-codes {
            padding: 12px 8px 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;

            &.disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }

            &:hover {
              background: colors.$item-hover-bg;
            }
          }

          &.seam-access-code-length {
            border-top: 1px solid colors.$text-gray-3;
          }

          &.seam-lock-status {
            display: flex;
            justify-content: space-between;

            > .seam-right {
              display: flex;
              align-items: center;
              gap: 8px;
            }
          }

          .seam-label {
            font-size: 14px;
            line-height: 134%;
            color: colors.$text-gray-1;
          }

          .seam-value {
            display: block;
            font-weight: 600;
            font-size: 16px;
            line-height: 134%;
          }
        }
      }

      .seam-contained-summary {
        padding: 0 24px;
        box-shadow:
          0 2px 8px 0 rgb(0 0 0 / 8%),
          0 1px 0 0 rgb(0 0 0 / 10%);
      }

      .seam-summary {
        padding: 24px 16px;
        border-radius: 16px;
        background: colors.$bg-a;

        .seam-content {
          display: flex;
          align-items: center;
          gap: 20px;

          .seam-image {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;

            img {
              max-width: 100%;
            }
          }

          .seam-info {
            > .seam-label {
              color: colors.$text-gray-1;
              font-weight: 600;
              font-size: 14px;
              line-height: 134%;
              margin-bottom: 4px;
            }

            .seam-device-name {
              margin-bottom: 16px;
              font-weight: 600;
              font-size: 21px;
              line-height: 132%;
            }

            .seam-properties {
              display: grid;
              grid-template-columns: min-content 1fr;
              grid-auto-rows: 1fr;
              font-size: 14px;
              line-height: 134%;
              gap: 4px 28px;

              .seam-label {
                color: colors.$text-gray-2;
                white-space: nowrap;
              }

              .seam-status-text {
                color: colors.$text-gray-1;
              }

              svg {
                font-size: 18px !important;
                margin-right: 8px;
              }

              > * {
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }

      .seam-icon-cell {
        flex: 0;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        > div {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .seam-name-cell {
        flex: 1;
      }

      .seam-action-cell {
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .seam-thermostat-device-details {
      margin-top: 8px;
    }
  }
}