@use "../mixin";

.Footer {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
  grid-column: span 12;
  justify-content: space-around;

  margin-inline: 12px;
  padding-block-end: 18px;

  color: var(--md-sys-color-on-surface-variant);

  a {
    text-decoration: none;
  }

  hr {
    width: 100%;
  }

  .description-area {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 6px;

    .topic {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 12px;

      img {
        height: 50px;
        width: 50px;

        -webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
        mask: var(--via-svg-mask) no-repeat 0 / 100%;
      }

      h3 {
        letter-spacing: 0.8px;
        text-transform: uppercase;
      }
    }

    .theme-info {
      @include mixin.typescale-style("body-large");

      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .beian-info {
      @include mixin.typescale-style("body-large");

      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      .beian-gongan {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        img {
          height: 16px;
          width: 16px;
        }
      }
    }
  }

  .social-media {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 1600px) {
  .Footer {
    grid-column: span 12;
  }
}

@media screen and (max-width: 1200px) {
  .Footer {
    grid-column: span 8;
  }
}

@media screen and (max-width: 840px) {
  .Footer {
    grid-column: span 6;
  }
}

@media screen and (max-width: 600px) {
  .Footer {
    grid-column: span 4;
  }
}
