@import '~scss/variables';

$titleHeight: 30px;

.container {
  height: 100%;
}

.header {
  line-height: 20px;

  @at-root {
    .pre {
      display: inline-block;
      cursor: pointer;
      span {
        vertical-align: super;
        font-size: 12px;
        padding: 0 4px;
      }
    }
  }
}

.article {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 100%;
  grid-gap: 12px;
  padding: 12px;
  height: calc(100% - #{$titleHeight});

  border-radius: $border-radius;
  background-color: $lightest;
  border: solid 1px #d8dee5;

  @at-root {
    .summery {
      width: 338px;
      h3 {
        line-height: 50px;
        font-weight: bold;
      }
      @at-root {
        .dataList {
          border-radius: 4px;
          background: #fff;
          border: solid 1px $light-color03;
          padding: 4px 0;
          & > div {
            h4 {
              font-weight: bold;
              &:after {
                content: ':';
              }
            }
            p {
              font-weight: normal;
            }
            padding: 12px;
            border-radius: 4px;
            background-color: $lightest;
            margin: 4px 8px;
          }
        }
        .selectContainer {
          display: flex;
        }
        .resourceIcon {
          width: 45px;
          height: 32px;
          border-radius: 2px;
          background-color: $bg-color;
          margin-left: 9px;
          text-align: center;
          line-height: 29px;

          & > a {
            display: block;
            width: 100%;
            height: 100%;
          }

          &:hover {
            background-color: #d8dee5;
          }
        }
      }
    }
    .log {
      border-radius: 4px;
      background-color: #242e42;
      color: #fff;
      display: grid;
      grid-template-rows: auto 1fr;
      @at-root {
        .toolbar {
          &.pollingMode {
            grid-template-columns: 1fr 32px 160px 32px;
          }
          padding: 8px 20px;
          line-height: 32px;
          border-radius: 4px;
          box-shadow: 0 1px 0 0 #182236;
          display: grid;
          grid-template-columns: 230px 1fr 32px 160px 32px;
          grid-column-gap: 8px;
          @at-root {
            .frequencyOpts {
              border-radius: 3px;
              background-color: $dark-color06;
              :global {
                .select-control {
                  color: inherit;
                  font-weight: 400;
                  border: none;
                  background-color: transparent !important;
                  box-shadow: none !important;
                  &:hover {
                    background-color: transparent;
                  }
                }
                .option-selected-area {
                  display: none;
                }
                .select-value,
                .select-value {
                  color: #fff !important;
                }
                .select-menu {
                  padding: 0;
                }
                .kubed-icon {
                  color: rgba(255, 255, 255, 0.9);
                  fill: rgba(255, 255, 255, 0.4);
                }
              }
            }
            .pollingBtn {
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
              background-color: $dark-color06;
              width: 32px;
              text-align: center;
              height: 32px;
              cursor: pointer;
              :global {
                .tooltip-content {
                  font-weight: 600;
                }
              }
            }
            .duration {
              border-radius: 4px;
              background-color: $dark-color06;
              font-weight: 600;
            }
            .clearQuery {
              cursor: pointer;
            }
            .input {
              border-radius: 4px;
              background-color: $dark-color06;
              align-items: center;
              display: flex;
              padding: 0 8px;
              input {
                margin: 0 10px;
                color: #fff;
                background-color: inherit;
                outline: none;
                border: none;
                flex: 1;
                font-weight: 600;
              }
            }
          }
        }
        .terminal {
          padding: 8px 20px;
          overflow: auto;
          p {
            line-height: 24px;
            color: #b7c4d1;
            font-weight: 600;
          }
          @at-root {
            .logTime {
              color: #5f708a;
            }
          }
        }
      }
    }
  }
}

.disableLink {
  cursor: no-drop;
}

.hightLight {
  background-color: #ffc781;
  color: #242e43;
  border-radius: 2px;
  padding: 0 2px;
}

.queryLog {
  color: #d8dee5;
  white-space: pre-wrap;
  font-family: $font-family-code;
}
