/*
 * 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}network {
  position: relative;
  cursor: default;

  .@{selector-prefix}networkSelect {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.85rem;
    cursor: pointer;
    border: solid 1px var(--wallet-primary);
    color: var(--wallet-primary);
    height: .pxToPcVw(40) [];
    font-size: .pxToPcVw(16) [];
    gap: .pxToPcVw(8) [];
    border-radius: .pxToPcVw(8) [];

    &.@{selector-prefix}networkSelectWarning {
      background-color: var(--wallet-danger);
      border-color: var(--wallet-danger);
      color: #fff;

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

    .@{selector-prefix}networkLogo {
      overflow: hidden;
      object-fit: contain;
      width: .pxToPcVw(20) [];
      height: .pxToPcVw(20) [];
    }

    .@{selector-prefix}warningIcon {
      width: .pxToPcVw(20) [];
      height: .pxToPcVw(20) [];
      fill: #fff;
    }

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

@media (max-width: @media-query-max-width) {
  .@{selector-prefix}network {
    .@{selector-prefix}networkSelect {
      height: .pxToMobileVw(50) [];
      font-size: .pxToMobileVw(20) [];
      gap: .pxToMobileVw(10) [];
      border-radius: .pxToMobileVw(10) [];

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

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

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