1  @import 'common/sass/variables/spacing';
  2  @import 'common/sass/variables/colors';
  3  
  4  .AddressBookTable {
  5    &-row {
  6      display: flex;
  7      align-items: center;
  8      margin-bottom: $space-md;
  9  
 10      @media (max-width: 650px) {
 11        flex-direction: column;
 12        align-items: flex-start;
 13        padding: 1rem;
 14        box-shadow: 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.12);
 15      }
 16  
 17      &-label {
 18        flex: 1 0;
 19      }
 20  
 21      &-error {
 22        align-items: flex-end;
 23        align-self: stretch;
 24        padding: 0;
 25        box-shadow: none;
 26        color: color(brand-danger);
 27  
 28        &-temporary-input--non-mobile {
 29          flex: 1;
 30          visibility: hidden;
 31  
 32          &-address {
 33            align-self: flex-start;
 34          }
 35  
 36          &-label {
 37            align-self: flex-end;
 38          }
 39  
 40          @media (max-width: 650px) {
 41            display: none;
 42          }
 43        }
 44  
 45        &--non-mobile {
 46          justify-content: flex-end;
 47  
 48          @media (max-width: 650px) {
 49            display: none;
 50          }
 51        }
 52  
 53        &--mobile {
 54          @media (min-width: 650px) {
 55            display: none;
 56          }
 57        }
 58      }
 59  
 60      &-identicon {
 61        margin-left: $space-sm;
 62  
 63        &-mobile {
 64          width: 30px;
 65          height: 30px;
 66          margin-right: $space-md;
 67  
 68          @media (min-width: 650px) {
 69            display: none;
 70          }
 71        }
 72  
 73        &-non-mobile {
 74          width: 80px;
 75          height: 80px;
 76  
 77          @media (max-width: 650px) {
 78            display: none;
 79          }
 80        }
 81      }
 82  
 83      &-labels {
 84        @media (max-width: 650px) {
 85          display: none;
 86        }
 87      }
 88  
 89      &-input {
 90        display: flex;
 91        align-items: center;
 92        flex-direction: row;
 93        align-self: stretch;
 94        flex: 1;
 95        margin-right: $space-sm;
 96  
 97        @media (max-width: 650px) {
 98          margin-right: 0;
 99          margin-bottom: $space-md;
100        }
101  
102        label {
103          margin-bottom: $space-sm;
104        }
105  
106        .btn {
107          margin-left: $space-sm;
108          height: $space-lg * 2;
109  
110          @media (max-width: 650px) {
111            align-self: flex-end;
112          }
113        }
114  
115        &-wrapper {
116          flex: 1;
117  
118          &-label {
119            @media (min-width: 651px) {
120              display: none;
121            }
122          }
123  
124          &-error {
125            color: color(brand-danger);
126            align-self: end;
127          }
128        }
129      }
130    }
131  
132    input {
133      margin-bottom: 0;
134    }
135  
136    .is-visible {
137      visibility: visible;
138    }
139  }