@use "@pythnetwork/component-library/theme";

.oisApyHistory {
  grid-column: span 2 / span 2;
  border-radius: theme.border-radius("2xl");
  padding-top: theme.spacing(4);
  border: 1px solid theme.color("border");
  display: flex;
  flex-flow: column nowrap;
  gap: theme.spacing(3);

  .oisApyHistoryHeader {
    color: theme.color("muted");

    @include theme.text("sm", "medium");

    margin: 0 theme.spacing(4);
  }

  .currentPoint {
    margin: 0 theme.spacing(4);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    .apy {
      color: theme.color("heading");

      @include theme.text("2xl", "medium");
    }

    .date {
      color: theme.color("muted");

      @include theme.text("sm", "normal");
    }
  }

  .chart {
    border-bottom-left-radius: theme.border-radius("2xl");
    border-bottom-right-radius: theme.border-radius("2xl");
    overflow: hidden;

    .chartArea {
      color: theme.color("button", "primary", "background", "normal");

      :global {
        // stylelint-disable-next-line selector-class-pattern
        .recharts-area-area {
          fill: theme.color("states", "data", "background");
        }
      }
    }
  }
}