/*
 * Copyright (c) 2022 @automata-network/wallet-sdk authors and contributors.
 * This software may be modified and distributed under the terms of UNLICENSED
 * license. Refer to the LICENSE file for details.
 */
.@{selector-prefix}connectorModal {
  .@{selector-prefix}modalWrap {
    max-width: auto;
  }
}

.@{selector-prefix}connectorExtensionContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .pxToPcVw(24) [];

  .@{selector-prefix}connectorExtensionClickable {
    cursor: pointer;
  }

  .@{selector-prefix}connectorExtension {
    display: flex;
    align-items: center;
    gap: .pxToPcVw(20) [];
    padding: .pxToPcVw(20) [];
    background: var(--wallet-block-bg);
    border: .pxToPcVw(1.5) [] solid var(--wallet-block-border);
    border-radius: .pxToPcVw(10) [];

    .@{selector-prefix}connectorExtensionIcon {
      width: .pxToPcVw(64) [];
      height: .pxToPcVw(64) [];
      object-fit: contain;
    }

    .@{selector-prefix}connectorExtensionLabel {
      flex-grow: 1;
      font-size: .pxToPcVw(25) [];
      font-weight: 500;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .@{selector-prefix}connectorExtensionLink {
      flex-shrink: 0;
      font-size: .pxToPcVw(25) [];
      font-weight: 500;
      color: var(--wallet-link);
    }
  }
}

@media (max-width: @media-query-max-width) {
  .@{selector-prefix}connectorModal {
    .@{selector-prefix}modalWrap {
      max-width: 80vw;
    }
  }

  .@{selector-prefix}connectorExtensionContainer {
    grid-template-columns: 1fr;
    gap: .pxToMobileVw(24) [];

    .@{selector-prefix}connectorExtension {
      gap: .pxToMobileVw(20) [];
      padding: .pxToMobileVw(20) [];
      border: .pxToMobileVw(1.5) [] solid var(--wallet-block-border);
      border-radius: .pxToMobileVw(10) [];

      .@{selector-prefix}connectorExtensionIcon {
        width: .pxToMobileVw(64) [];
        height: .pxToMobileVw(64) [];
      }

      .@{selector-prefix}connectorExtensionLabel {
        font-size: .pxToMobileVw(25) [];
      }

      .@{selector-prefix}connectorExtensionLink {
        font-size: .pxToMobileVw(25) [];
      }
    }
  }
}