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

.reposWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;

  & .reposXAxes {
    position: relative;
    height: 2px;
    max-height: 2px;
    margin-top: 10px;
    margin-bottom: 25px;
    margin-right: 25px;
    background-color: var(--oc-gray-4);

    & .xAxesText {
      position: absolute;
      font-size: 12px;
      color: var(--oc-gray-4);
      left: 50%;
      margin-top: 3px;
      transform: translateX(-50%);
    }

    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 10px solid var(--oc-gray-4);
      top: 50%;
      right: -2px;
      transform: translateY(-50%);
    }
  }

  & .reposContentsWrapper {
    display: flex;
    flex-direction: row;

    & .reposContents {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    & .reposYAxes {
      width: 2px;
      max-width: 2px;
      flex: 1;
      margin-left: 10px;
      margin-right: 25px;
      background-color: var(--oc-gray-4);
      position: relative;

      & .yAxesText {
        position: absolute;
        font-size: 12px;
        color: var(--oc-gray-4);
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid var(--oc-gray-4);
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  & .reposItem {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

    & .itemData {
      flex: 1;
      padding: 0 10px;
      color: var(--oc-gray-5);
    }

    & .itemChart {
      height: 15px;

      & .commitBar {
        height: 100%;
        width: 100%;
        border-radius: 0 7px 7px 0;
      }
    }
  }
}