@import '~scss/variables';

.secretWrapper {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
}

.defaultWrapper {
  padding: 12px;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px $light-color03;
  margin-bottom: 20px;

  ul > li {
    display: flex;
    padding: 12px 20px;
    border-radius: 22px;
    background-color: $bg-color;
    border: solid 1px $border-color;

    & + li {
      margin-top: 8px;
    }

    & > span {
      font-family: $font-family-id;
      word-break: break-all;

      &:first-child {
        min-width: 160px;
        margin-right: 80px;
        color: #79879c;
      }

      & > pre {
        font-family: $font-family-id;
        padding: 0;
        background: transparent;
        white-space: pre-wrap;
      }
    }
  }
}

.configWrapper {
  .title {
    display: block;
    margin-bottom: 12px;

    a {
      color: $blue-color04;
    }
  }

  .codeEditor {
    position: relative;

    .ops {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 2;
      height: 32px;
      padding: 6px 10px;
      border-radius: 16px;
      color: $white;
      background-color: $dark-color06;
    }

    :global {
      .icon {
        opacity: 0.6;
        margin-top: -1px;

        &:hover {
          opacity: 1;
          background-color: transparent;
        }
      }
    }

    .split {
      margin: 0 8px;
    }
  }
}
