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

.supportDrawer {
  display: flex;
  flex-flow: column nowrap;
  gap: theme.spacing(8);

  & > * {
    flex: none;
  }

  .linkList {
    display: flex;
    flex-flow: column nowrap;
    gap: theme.spacing(4);

    .title {
      @include theme.text("lg", "medium");

      color: theme.color("heading");
    }

    .items {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-flow: column nowrap;
      gap: theme.spacing(2);

      .link {
        padding: theme.spacing(3);
        display: grid;
        grid-template-columns: max-content 1fr max-content;
        grid-template-rows: max-content max-content;
        text-align: left;
        gap: theme.spacing(2) theme.spacing(4);
        align-items: center;
        width: 100%;

        .icon {
          font-size: theme.spacing(8);
          color: theme.color("states", "data", "normal");
          grid-row: span 2 / span 2;
          display: grid;
          place-content: center;
        }

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

          color: theme.color("heading");
        }

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

          color: theme.color("muted");
          grid-column: 2;
          grid-row: 2;
        }

        .caret {
          color: theme.color("states", "data", "normal");
          font-size: theme.spacing(4);
          grid-row: span 2 / span 2;
        }
      }
    }
  }
}