main {
  max-width: 1250px;
}

h1 {
  margin-bottom: 1.5rem;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 36px);
  color: var(--color-quiver-white-light);
}

.projection-charts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;

  > div#projectionChartsHouse, > div#projectionChartsSenate {
    position: relative;
    flex: 1;
    border: 1px solid var(--color-border-gray);
    border-radius: 8px;
    padding: 1.125rem;
    padding-bottom: 1rem;
    min-width: 300px;
    min-height: 345px;
    background-image: linear-gradient(175deg, #333333 -50%, #161616 30%);
    
    > div.charts-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: clamp(18px, 2vw, 19px);
      white-space: nowrap;

      strong {
        font-weight: 550;
      }

      i {
        margin-right: 0.25rem;
        color: #525258;
      }
    }

    div.charts-tabs {
      display: flex;
      border: 2px solid var(--color-border-gray);
      border-radius: 9999px;
      background-color: #181818;

      &.tabs-inactive {
        opacity: 0.5;
        pointer-events: none;
      }

      > div {
        margin: .2rem;
        border-radius: 9999px;
        padding: 0.25rem 0.9rem;
        min-width: 75px;
        cursor: pointer;
        font-size: clamp(12px, 1.2vw, 14px);
        color: var(--color-quiver-white-4);
        text-align: center;

        &:first-child {
          margin-right: 0;
        }

        &:last-child {
          margin-left: 0;
        }

        &.active-tab {
          background-color: var(--color-border-gray);
          font-weight: 500;
          color: var(--color-quiver-white);
        }
      }
    }


    div.chart-description {
      display: flex;
      flex-direction: column;
      gap: .125rem;

      p.projection-text {
        padding: 1rem 0 0;
        font-size: clamp(14px, 1.5vw, 16px);
        color: var(--color-quiver-white);
        font-weight: 500;
      }

      span.projection-subtext {
        font-size: clamp(12px, 1.2vw, 13px);
        color: var(--color-quiver-gray-3);
      }
    }

    .charts-content {
      position: relative;
    }

    .projection-chart-outer {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin: 1.5rem 0 .25rem;

      /* match with chart heights from midtermElectionsDash.js */
      min-height: 200px;

      .projection-chart {
        display: flex;
        justify-content: center;
        margin-left: .5rem;
      }

      .chart-legend {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        max-width: 250px;
        margin: 0 auto;
        white-space: nowrap;

        > .legend-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: .33rem .25rem;
          gap: .5rem;
          font-weight: 400;
          font-size: clamp(12px, 1.2vw, 14px);

          &.legend-item-seats {
            padding: .125rem .25rem;
            font-size: clamp(12px, 1.2vw, 13px);
          }

          .square {
            border-radius: 1px;
            padding: 0;
            min-width: 8px;
            width: 8px;
            max-width: 8px;
            height: 8px;
  
            &.square-democrat {
              background-color: #6fc8ff;
            }
  
            &.square-republican {
              background-color: #ff7c78;
            }

          }

          .democrat {
            color: #6fc8ff;
          }

          .republican {
            color: #ff7c78;
          }

          span {
            width: 140px;
          }
          
          strong {
            margin-left: auto;
            padding-left: .5rem;
            font-family: "Roboto", sans-serif;
          }
        }
      }

      &:not(.chart-active) {
        display: none;
      }
    }

    #chartSeatsHouse, #chartSeatsSenate {
      .chart-legend {
        min-height: 185px;
        justify-content: space-evenly !important;
      }
    }

    .content-placeholder-outer {
      top: 0;
      border-radius: inherit;
      background-color: #181818;
    }
  }
}

@media screen and (min-width: 1024px) {
  .projection-charts {
    > div#projectionChartsHouse, > div#projectionChartsSenate {
      padding: 1.5rem;
    }
  }
}