/*
 * 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}switchNetworkMenu {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  padding-top: .pxToPcVw(8) [];
  z-index: 100;

  .@{selector-prefix}card {
    width: max-content;
    text-align: left;
    padding: 0.85rem 1rem;
    background-color: var(--wallet-bg);
    border: solid 1px rgba(0, 0, 0, 0.25);
    border-radius: .pxToPcVw(8) [];
    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px .pxToPcVw(4) [] .pxToPcVw(8) [],
      rgb(0 0 0 / 4%) 0px .pxToPcVw(16) [] .pxToPcVw(24) [],
      rgb(0 0 0 / 1%) 0px .pxToPcVw(24) [] .pxToPcVw(32) [];
  }

  .@{selector-prefix}title {
    font-size: 0.875rem;
    margin-bottom: .pxToPcVw(4) [];
    color: var(--wallet-text);
  }

  .@{selector-prefix}listWrapper {
    display: flex;
    flex-direction: column;
    gap: .pxToPcVw(3) [];
  }

  .@{selector-prefix}listItem {
    cursor: pointer;
    padding-block: .pxToPcVw(4) [];
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .pxToPcVw(12) [];
    font-weight: 500;
    color: var(--wallet-text);
  }
  .@{selector-prefix}listItem:hover {
    opacity: 0.75;
  }

  .@{selector-prefix}networkLogo {
    width: .pxToPcVw(20) [];
    height: .pxToPcVw(20) [];
    font-size: .pxToPcVw(14) [];
    overflow: hidden;
    display: flex-inline;
    align-items: center;
    justify-content: center;
  }
  .@{selector-prefix}networkLogo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: @media-query-max-width) {
  .@{selector-prefix}switchNetworkMenu {
    padding-top: .pxToMobileVw(8) [];

    .@{selector-prefix}card {
      border-radius: .pxToMobileVw(8) [];
      box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px,
        rgb(0 0 0 / 4%) 0px .pxToMobileVw(4) [] .pxToMobileVw(8) [],
        rgb(0 0 0 / 4%) 0px .pxToMobileVw(16) [] .pxToMobileVw(24) [],
        rgb(0 0 0 / 1%) 0px .pxToMobileVw(24) [] .pxToMobileVw(32) [];
    }

    .@{selector-prefix}title {
      margin-bottom: .pxToMobileVw(4) [];
    }

    .@{selector-prefix}listWrapper {
      gap: .pxToMobileVw(3) [];
    }

    .@{selector-prefix}listItem {
      padding-block: .pxToMobileVw(4) [];
      gap: .pxToMobileVw(12) [];
    }

    .@{selector-prefix}networkLogo {
      width: .pxToMobileVw(24) [];
      height: .pxToMobileVw(24) [];
      font-size: .pxToMobileVw(20) [];
      border-radius: .pxToMobileVw(10) [];
    }
  }
}