@import 'open-color/open-color.css';

.mobile_card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
  padding: 15px;
  background-color: var(--oc-white);
  box-shadow: var(--shadow1);
  border-bottom: 0 !important;
}

.info_card {
  composes: mobile_card;
  padding: 0;
}

.info_share {
  background-color: transparent !important;
}

.mobile_card_with_info {
  composes: mobile_card;
  padding-top: 0 !important;
}

.info_wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 0 !important;

  &:not(:last-child) {
    border-bottom: 1px solid var(--oc-gray-2);
  }
}

.info_with_chart {
  composes: info_wrapper;
  /*padding-bottom: 10px;*/
  margin-bottom: 10px !important;
}

.loading_container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.info_chart {
  text-align: center;
  font-size: 12px;

  &.repos_chart {
    margin-bottom: 20px;
  }
}

canvas {
  margin: 0 auto;

  &.min_canvas {
    max-width: 280px;
  }

  &.max_canvas {
    max-width: none;
    width: 100% !important;
  }
}

.main_text {
  font-size: 1.7em;
  color: var(--oc-green-8);
}

.share_info_wrapper {
  padding: 15px 0 0;
  width: 100%;
}

.chart_info_container {
  & .chart_info_wrapper {
    padding: 10px 0px 10px 15px;

    &:last-child {
      & .chart_info_card {
        width: 150px;
        padding-right: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  & .chart_info_card {
    border-radius: 2px;
    box-shadow: var(--shadow2);
    padding: 10px 25px 7px;
    background-color: var(--oc-green-7);

    & i {
      margin-right: 10px;
    }
  }
}
