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

.priceComponentDrawer {
  .priceComponentDrawerBody {
    grid-template-rows: max-content max-content;
    grid-template-columns: 100%;
  }

  .badges {
    @include theme.breakpoint("lg") {
      display: none;
    }
  }

  .ghostOpenButton {
    @include theme.breakpoint("md") {
      display: none;
    }
  }

  .bigScreenBadges {
    display: none;

    @include theme.breakpoint("lg") {
      display: flex;
      flex-flow: row nowrap;
      gap: theme.spacing(3);
      align-items: center;
    }
  }

  .outlineOpenButton {
    display: none;

    @include theme.breakpoint("md") {
      display: inline flow-root;
    }
  }

  .testFeedMessage {
    margin-bottom: theme.spacing(10);
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: theme.spacing(4);
    margin-bottom: theme.spacing(10);

    @include theme.breakpoint("lg") {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
  }

  .spinner {
    margin: theme.spacing(40) auto;
    font-size: theme.spacing(16);
  }

  .rankingBreakdown {
    .scoreHistoryChart {
      grid-column: span 2 / span 2;
      border-radius: theme.border-radius("2xl");
      display: flex;
      flex-flow: column nowrap;
      gap: theme.spacing(4);
      background: theme.color("background", "primary");
      margin-bottom: theme.spacing(2);

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

        .left {
          display: flex;
          flex-flow: column nowrap;
          gap: theme.spacing(1);

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

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

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

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

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

        .score,
        .uptimeScore,
        .deviationScore,
        .stalledScore {
          transition: opacity 100ms linear;
          opacity: 0.2;
        }

        .score {
          color: theme.color("states", "data", "normal");
        }

        .uptimeScore {
          color: theme.color("states", "info", "normal");
        }

        .deviationScore {
          color: theme.color("states", "lime", "normal");
        }

        .stalledScore {
          color: theme.color("states", "warning", "normal");
        }
      }

      &:not([data-focused-score], [data-hovered-score]) {
        .score,
        .uptimeScore,
        .deviationScore,
        .stalledScore {
          opacity: 1;
        }
      }

      &[data-hovered-score="uptime"],
      &[data-focused-score="uptime"] {
        .uptimeScore {
          opacity: 1;
        }
      }

      &[data-hovered-score="deviation"],
      &[data-focused-score="deviation"] {
        .deviationScore {
          opacity: 1;
        }
      }

      &[data-hovered-score="stalled"],
      &[data-focused-score="stalled"] {
        .stalledScore {
          opacity: 1;
        }
      }

      &[data-hovered-score="final"],
      &[data-focused-score="final"] {
        .score {
          opacity: 1;
        }
      }
    }

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

      margin: theme.spacing(2) theme.spacing(4);
    }

    .smallLegend {
      list-style-type: none;
      padding: 0;
      margin: 0;
      background: theme.color("background", "primary");
      border-radius: theme.border-radius("xl");

      li {
        padding: theme.spacing(3) theme.spacing(4);
        border-bottom: 1px solid theme.color("background", "secondary");

        &:last-child {
          border-bottom: none;
        }

        dl {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          font-size: theme.font-size("sm");
          margin: 0;
          margin-top: theme.spacing(4);

          .weight,
          .scoreValue {
            display: flex;
            flex-flow: row nowrap;
            gap: theme.spacing(2);

            dt {
              font-weight: theme.font-weight("medium");
            }

            dd {
              padding: 0;
              margin: 0;
            }
          }
        }
      }

      .metricDescription {
        display: none;
      }

      @include theme.breakpoint("lg") {
        display: none;
      }
    }

    .legendTable {
      display: none;

      @include theme.breakpoint("lg") {
        display: unset;
      }
    }

    .scoreCell {
      vertical-align: top;
    }

    .metric {
      display: flex;
      flex-flow: column nowrap;
      gap: theme.spacing(2);
      overflow: hidden;

      .metricName {
        display: flex;
        flex-flow: row nowwrap;
        align-items: center;
        gap: theme.spacing(2);

        .legend {
          width: theme.spacing(4);
          height: theme.spacing(4);
          fill: none;
        }
      }

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

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

        white-space: normal;
        line-height: 1.2;
      }

      &[data-component="uptime"] .legend {
        stroke: theme.color("states", "info", "normal");
      }

      &[data-component="deviation"] .legend {
        stroke: theme.color("states", "lime", "normal");
      }

      &[data-component="stalled"] .legend {
        stroke: theme.color("states", "warning", "normal");
      }

      &[data-component="final"] .legend {
        stroke: theme.color("states", "data", "normal");
      }
    }
  }
}
