@use "../tokens/color";
@use "../tokens/space";
@use "../tools/convert";
@use "../tools/text";
@use "../tools/generate";
@use "../tools/layout";
@use "../typography/config" as typographyConfig;
@use "sass:map" as sassmap;

main {
  min-height: 100vh;
  padding-top: var(--header-height, 80px);
}

.l-debug {
  padding: space.get("small");
  background-color: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong);

  @include layout.reset-last-child-margin-bottom;
}

.l-debug-flex {
  display: flex;

  .l-debug {
    flex: 1 1 auto;
  }
}

.code-wrapper {
  border: 1px solid var(--color-border-strong);
  margin-bottom: 30px;

  pre {
    margin-bottom: 0 !important;
  }

  .token:empty {
    display: none !important;
  }
}

.sg-icon-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  list-style: none;
  padding-left: 0;

  &--wide {
    max-width: convert.to-rem(900px);
  }

  &__item {
    display: flex;
    align-items: center;
    width: convert.to-rem(220px);
    min-height: convert.to-rem(40px);
    margin-bottom: space.get();
    margin-right: space.get("xsmall");
    overflow-wrap: anywhere;

    .icon {
      cursor: pointer;
      flex-shrink: 0;
      margin-right: space.get("small");
    }

    .icon:hover {
      color: var(--color-text-accent);
    }
  }
}

.sg-nav__link {
  text-decoration: none !important;
  color: rgb(102, 102, 102) !important;

  &:hover {
    color: #000 !important;
  }
  &:focus {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  &.sg-nav__link--is-active {
    color: rgb(241, 110, 0) !important;
  }
}

.h-link {
  text-decoration: none !important;
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &:hover > .h-link {
    display: inline-block;
  }
}

@mixin use-display-style($id) {
  @include generate.css-map(typographyConfig.$display-base);
  @include generate.responsive-css-map(
    sassmap.get(typographyConfig.$displays, $id)
  );
}

main > div {
  > h1 {
    @include use-display-style(1);
  }

  > h2 {
    @include use-display-style(3);
  }

  > h4 {
    @include generate.responsive-css-map(
      sassmap.get(typographyConfig.$body-text, "large")
    );
  }
}

/* stylelint-disable selector-max-compound-selectors */
main > div > h1 + p,
main > div > h1 + p + p,
main > div > h1 + p + p + p {
  @include generate.responsive-css-map(
    sassmap.get(typographyConfig.$body-text, "large")
  );
}