/*
 * 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: ata-;
@pcViewWidth: 1920;
@mobileViewWidth: 720;
@media-query-max-width: 1024px;

.pxToPcVw(@px) {
  @result: ((@px / @pcViewWidth) * 100vw);
}

.pxToMobileVw(@px) {
  @result: ((@px / @pcViewWidth) * (@pcViewWidth / @mobileViewWidth) * 100vw);
}

@import url(components/Account/account.less);
@import url(components/ConnectButton/connect-button.less);
@import url(components/AccountModal/account-modal.less);
@import url(components/Network/network.less);
@import url(components/SwitchNetworkMenu/switch-network-menu.less);
@import url(components/Wallet/wallet.less);
@import url(components/Connector/connector.less);
@import url(components/Modal/modal.less);

:root {
  --wallet-primary: #ff8a00;
  --wallet-danger: #d36666;
  --wallet-bg: #fff;
  --wallet-link: rgba(81, 81, 81, 0.5);
  --wallet-text: #242424;
  --wallet-modal-bg: rgba(255, 255, 255, 0.5);
  --wallet-block-bg: rgba(255, 255, 255, 0.1);
  --wallet-block-border: rgba(255, 255, 255, 0.2);

  @media (prefers-color-scheme: dark) {
    & {
      --wallet-bg: #242424;
      --wallet-text: #fff;
      --wallet-link: rgba(255, 255, 255, 0.5);
      --wallet-modal-bg: rgba(80, 80, 80, 0.33);
    }
  }

  body {
    &.ata-wallet-theme-dark {
      --wallet-bg: #242424;
      --wallet-link: rgba(255, 255, 255, 0.5);
      --wallet-text: #fff;
      --wallet-modal-bg: rgba(80, 80, 80, 0.33);

      @media (prefers-color-scheme: dark) {
        & {
          --wallet-bg: #242424;
          --wallet-link: rgba(255, 255, 255, 0.5);
          --wallet-text: #fff;
          --wallet-modal-bg: rgba(80, 80, 80, 0.33);
        }
      }
    }

    &.ata-wallet-theme-light {
      --wallet-bg: #fff;
      --wallet-link: rgba(81, 81, 81, 0.5);
      --wallet-text: #242424;
      --wallet-modal-bg: rgba(255, 255, 255, 0.5);

      @media (prefers-color-scheme: dark) {
        & {
          --wallet-bg: #fff;
          --wallet-link: rgba(81, 81, 81, 0.5);
          --wallet-text: #242424;
          --wallet-modal-bg: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}

/**
 * web3modal CSS override
 */
#WEB3_CONNECT_MODAL_ID {
  .web3modal-modal-lightbox {
    background-color: rgba(0, 0, 0, 0.33);
    backdrop-filter: blur(16px);

    .web3modal-modal-card {
      background-color: var(--wallet-modal-bg);
      color: var(--wallet-text);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border: solid 3px rgba(255, 255, 255, 0.2);

      * {
        color: inherit;
      }

      .web3modal-provider-wrapper {
        .web3modal-provider-container {
          background-color: transparent;
        }

        &:hover .web3modal-provider-container {
          background-color: var(--wallet-bg);
        }
      }

      .web3modal-provider-description {
        opacity: 0.5;
      }
    }
  }
}