/*
 * 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}accountModal {
  .@{selector-prefix}modalWrap {
    max-width: auto;
  }
}

.@{selector-prefix}connectionWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .pxToPcVw(24) [];
  width: 100%;

  > img {
    width: .pxToPcVw(50) [];
    height: .pxToPcVw(50) [];
    flex: 0 0 auto;
    object-fit: contain;
  }

  .@{selector-prefix}connectionDetail {
    flex: 1 0 auto;
    color: var(--wallet-text);
  }

  .@{selector-prefix}connectionStatus {
    font-size: .pxToPcVw(20) [];
    line-height: calc(23 / 20 * 1em);
    margin-bottom: .pxToPcVw(3) [];
  }

  .@{selector-prefix}accountAddress {
    font-size: .pxToPcVw(25) [];
    font-weight: 500;
    line-height: calc(29 / 25 * 1em);
  }

  .@{selector-prefix}buttonGroup {
    border-left: .pxToPcVw(2) [] solid rgba(255, 255, 255, 0.2);
    padding-left: .pxToPcVw(24) [];
    display: flex;
    flex-direction: row;
    gap: .pxToPcVw(24) [];
    align-items: center;
  }

  .@{selector-prefix}accountButton {
    width: .pxToPcVw(50) [];
    height: .pxToPcVw(50) [];
    background: none;
    padding: 0;
    border: solid .pxToPcVw(2) [] var(--wallet-primary);
    border-radius: .pxToPcVw(10) [];
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    &.@{selector-prefix}accountLogoutButton {
      background-color: var(--wallet-danger);
      border: none;

      > .@{selector-prefix}logoutIcon {
        fill: #fff;
      }
    }

    > .@{selector-prefix}buttonIcon {
      width: .pxToPcVw(20) [];
      height: .pxToPcVw(20) [];
      fill: var(--wallet-primary);
    }
  }
}

@media (max-width: @media-query-max-width) {
  .@{selector-prefix}connectionWrap {
    gap: .pxToMobileVw(24) [];
    flex-direction: column;
    width: auto;

    > img {
      width: .pxToMobileVw(50) [];
      height: .pxToMobileVw(50) [];
    }

    .@{selector-prefix}connectionDetail {
      text-align: center;
    }

    .@{selector-prefix}connectionStatus {
      font-size: .pxToMobileVw(20) [];
      margin-bottom: .pxToMobileVw(3) [];
    }

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

    .@{selector-prefix}buttonGroup {
      padding-left: 0;
      padding-top: .pxToMobileVw(24) [];
      gap: .pxToMobileVw(24) [];
      border-left: none;
      border-top: .pxToMobileVw(2) [] solid rgba(255, 255, 255, 0.2);
    }

    .@{selector-prefix}accountButton {
      width: .pxToMobileVw(50) [];
      height: .pxToMobileVw(50) [];
      border-radius: .pxToMobileVw(10) [];
      border: solid .pxToMobileVw(2) [] var(--wallet-primary);

      > .@{selector-prefix}buttonIcon {
        width: .pxToMobileVw(20) [];
        height: .pxToMobileVw(20) [];
      }
    }
  }
}