@import "../../assets/scss/variables";

.line-chart-with-table {
  display: flex;
  background-color: #F3F8FC;
  padding: 10px;
  gap: 40px;
  height: 290px;

  & .chart {
    flex: 1 0 0%;
  }

  & .table {
    margin: 0;
    background: white;
    flex: 0 0 450px;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 6px;

    &-inner {

      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px 10% 0 10%;
      margin: 0;

      & li {
        font-size: 1.5rem;
        flex: 1 1 auto;
        color: $main-color;
        display: flex;
        justify-content: space-between;
        border: none;
        border-bottom: 1px dashed $main-color;
        align-items: flex-end;
        padding-bottom: 7px;
        &:last-child{
          border-bottom: none;
        }

        & .name {
          font-size: 15px;
          font-weight: $medium;
        }

        & .value {
          font-size: 1.6rem;
          font-weight: $bold;

          &.total {
            font-size: 2.2rem
          }
        }
      }

    }
  }
}