1  @import 'common/sass/variables';
  2  @import 'common/sass/mixins';
  3  
  4  $radio-size: 12px;
  5  $label-padding: 0.3rem 0.4rem;
  6  $left-border-size: 2px;
  7  
  8  @if ($is-electron) {
  9    $radio-size: 14px;
 10    $label-padding: 12px 8px;
 11    $left-border-size: 4px;
 12  }
 13  
 14  .NetworkOption {
 15    border-left: $left-border-size solid;
 16    border-bottom: 1px solid shade-dark(0.08);
 17  
 18    &-label {
 19      display: flex;
 20      align-items: center;
 21      padding: $label-padding;
 22      cursor: pointer;
 23  
 24      &-name {
 25        flex: 1;
 26        @include ellipsis;
 27  
 28        @if ($is-electron) {
 29          &.is-long-name {
 30            font-size: 14px;
 31          }
 32        }
 33  
 34        &:before {
 35          content: "";
 36          position: relative;
 37          top: 1px;
 38          display: inline-block;
 39          border: 1px solid shade-dark(0.15);
 40          border-radius: 100%;
 41          height: $radio-size;
 42          width: $radio-size;
 43          margin-right: $space-xs;
 44          box-shadow: 0 0 0 1px color(control-bg) inset;
 45        }
 46  
 47        &:hover {
 48          &:before {
 49            border-color: shade-dark(0.3);
 50          }
 51        }
 52  
 53        &.is-selected {
 54          &:before {
 55            background: color(brand-primary);
 56            border-color: color(brand-primary);
 57          }
 58        }
 59  
 60        &.is-specific-node {
 61          &:before {
 62            background: linear-gradient(
 63              135deg,
 64              transparent,
 65              transparent 45%,
 66              color(brand-primary) 45%,
 67              color(brand-primary) 100%
 68            );
 69          }
 70  
 71          &:hover:before {
 72            background: color(brand-primary-lighter);
 73          }
 74        }
 75  
 76        &-badge {
 77          display: inline-block;
 78          opacity: 0.5;
 79          margin-left: 0.2rem;
 80          font-size: 11px;
 81        }
 82      }
 83  
 84      &-expand {
 85        @include reset-button;
 86        width: 20px;
 87        height: 20px;
 88        font-size: 10px;
 89        color: shade-dark(0.4);
 90        border-radius: 100%;
 91        transition-property: color, background-color, transform;
 92        transition-duration: 75ms;
 93        transition-timing-function: ease;
 94  
 95        &:hover {
 96          color: shade-dark(0.6);
 97          background: shade-dark(0.1);
 98        }
 99  
100        &.is-expanded {
101          color: shade-dark(0.6);
102          transform: rotate(180deg);
103        }
104      }
105    }
106  
107    &-nodes {
108      padding: 0.2rem 0.5rem;
109      background: shade-dark(0.02);
110      border-top: 1px solid shade-dark(0.08);
111    }
112  }