@import 'src/styles/master';

.notConnected {
  width: 100%;
  margin-top: space(8);

  .icon {
    width: rem-calc(160);
    height: rem-calc(160);
  }

  .vaults {
    pointer-events: none;
    @include shadowFade;
  }

  .welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: space(18);

    .logo {
      margin-bottom: space(10);
      width: rem-calc(168);
      height: rem-calc(168);
    }

    .title {
      font-weight: $fontWeightSemibold;
      text-align: center;
      @include typoH2caps;
    }

    .subTitle {
      @include margin(2, 0, 0);
      @include typoXLcaps;
      text-align: center;
      opacity: 0.89;
    }

    .desc {
      margin-top: space(6);
      margin-bottom: space(6);
      color: $buttonBorder;
      text-align: center;

      a {
        color: $colorPrimary;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .connectButton {
      display: flex;
      align-items: center;

      svg {
        @include margin(-0.5, 2, 0, 0);
        height: rem-calc(16);
        width: auto;
      }
      span {
        margin-top: space(0.25);
      }
    }
  }

  .grids {
    display: flex;
    margin-bottom: space(16);
    @include shadowFade;

    > div {
      flex: 1;
    }

    > div:first-child {
      margin-inline-end: space(4);
    }
    > div:last-child {
      margin-inline-start: space(4);
    }

    table {
      tr {
        th,
        td {
          display: table-cell !important;
        }
      }
    }
  }
}

@media only screen and (max-width: $bpSmallHigh) {
  .notConnected {
    @include margin(0);
    .welcome {
      @include margin(6, 0);
    }
  }
}

/* PSEUDO */
@media only screen and (max-width: rem-calc(440)) {
  .notConnected {
    .grids {
      > div {
        table {
          tr {
            th,
            td {
              &:nth-child(1) {
                padding-inline-start: rem-calc(8);
              }
              &:nth-child(2) {
                display: none !important;
              }
              &:nth-child(4) {
                width: rem-calc(80) !important;
              }
              &:nth-child(5) {
                display: none !important;
              }
              &:last-child {
                display: table-cell !important;
              }
            }
          }
        }
      }
    }
  }
}
