@import "../styles/_variables";

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  color: var(--primary-text);
}

.codeBox {
  margin: 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
  min-width: 80%;
  border-radius: 4px;
  color: var(--primary-text);
  :global(.ant-input) {
    background-color: transparent;
    color: var(--primary-text);
  }
  :global(.ant-input::placeholder) {
    color: var(--secondary-text);
  }
  :global(.ant-input-suffix) {
    color: var(--primary-text);
  }

  .label {
    color: var(--primary-text);
    font-weight: 700;
  }
}

.netcatInfo {
  padding: 2rem;
  padding-bottom: calc(100vh - 10rem);

  .title {
    font-weight: 700;
    color: var(--primary-text);
    font-size: nth($fontSize, 5);
  }

  .desc {
    font-weight: 600;
    color: var(--secondary-text);
    letter-spacing: 0.02rem;
    font-size: nth($fontSize, 3);
  }

  .vpnFileLink {
    max-width: 48rem;

    p {
      display: flex;
      font-size: nth($fontSize, 3);
      color: var(--primary-text);
      margin-bottom: 1.5rem;
      font-weight: 600;

      a {
        margin-left: 0.5rem;
        color: var(--bugbase-green);
      }
    }

    .title {
      font-weight: 700;
      color: var(--primary-text);
      font-size: nth($fontSize, 5);
    }

    .desc {
      font-weight: 600;
      color: var(--secondary-text);
      letter-spacing: 0.02rem;
      font-size: nth($fontSize, 3);
    }

    .editIcon {
      cursor: pointer;
      margin-left: 0.5rem;
      color: var(--secondary-text);
      transition: all 0.2s ease-in-out;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .vpnLogs {
    margin-top: 2rem;
    background-color: var(--black-bg);
    color: var(--primary-text);
    padding: 1rem;
    overflow-x: auto;

    .logHeading {
      color: var(--primary-purple);
      font-weight: 700;
      font-size: nth($fontSize, 5);
      margin-bottom: 1rem;
    }

    .logContent {
      white-space: pre-wrap;
    }
  }
}
.netcatForm {
  padding: 0 2rem;

  .netcatFormItem {
    :global(label) {
      font-size: nth($fontSize, 3);
      color: var(--primary-text);
      margin-bottom: 0.5rem;
      letter-spacing: 0.6px;
    }
    :global(.ant-input) {
      background-color: var(--secondary-text-100);
      border: 1px solid var(--secondary-text-500);
      height: 2.4rem;
      color: var(--primary-text);
    }
    :global(.ant-input::placeholder) {
      color: var(--secondary-text-500);
    }
  }
}

.netcatContainer {
  color: var(--primary-text);
  font-weight: 600;
}

.pageWrapper {
  @include responsive(tablet1) {
    display: none;
  }
}

.mobileWrapper {
  display: none;

  @include responsive(tablet1) {
    display: flex;
    padding: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    h3 {
      font-weight: 600;
      color: var(--primary-text);
      text-align: center;
      margin-bottom: 2rem;
      font-size: nth($fontSize, 6);
    }

    p {
      line-height: 1.3;
      font-weight: 600;
      text-align: center;
      color: var(--secondary-text);
      font-size: nth($fontSize, 3);
    }
  }
}