@import '~scss/variables';

.tips {
  border-radius: $border-radius;
  background-color: $lightest;
  padding: 12px 0;
  border: solid 1px #eee;
  @at-root {
    .rule {
      font-size: 14px;
      font-weight: 600;
      line-height: 3.43;
    }
    .searchBar {
      flex: 1;
      border: none;
    }
  }
}

.pane {
  width: 760px;
  margin: 0 auto;
}

.card {
  border-radius: 2px;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  background-color: $white;
  padding: 12px 20px;
  margin: 8px 0;
}

.count {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.38;
  color: $blue-color03;
}

.banner {
  display: flex;
  margin-top: 40px;
  margin-bottom: 60px;
  @at-root {
    .illustration {
      height: 120px;
      width: 213px;
      margin-right: 20px;
    }
    .statistics {
      flex: 1;
      h3 {
        font-size: 32px;
        font-weight: 600;
      }
      p {
        font-size: 12px;
        color: $dark-color07;
      }
    }
  }
}

.category {
  display: flex;
  cursor: pointer;
  transition: box-shadow 0.3s;
  &:hover {
    box-shadow: $card-hover-shadow;
    h4 {
      color: #4ca986;
    }
  }

  @at-root {
    .icon {
      display: inline-block;
      margin-right: 8px;
    }

    .desc {
      flex: 1;
      h4 {
        font-size: 12px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        color: $dark-color07;
      }
      p {
        color: $dark-color01;
      }
    }
  }
}

.recent {
  display: flex;
  align-items: stretch;
  height: 140px;
  @at-root {
    .recentSummary {
      width: 160px;
      margin-right: 10px;
      align-self: center;
    }
    .chart {
      flex: 1;
    }
  }
}

.searchBarContainer {
  display:flex;
  border: solid 1px $border-color;
  border-radius: 4px;

  .clusterSelector {
    flex-basis: 130px;
    border-right: solid 1px $border-color;
    border-radius: 4px 0 0 4px;
    line-height: 40px;
    overflow: hidden;
    :global {
      .select-control {
        border: none;
        border-radius: 0;
        height: 40px;
      }
      .select-options {
        width: auto !important;
        min-width: 130px;
      }
    }
  }
}
