@use "@sass-palette/hope-palette";
@use "@sass-palette/hope-config";
@use "sass:color";
@use "sass:list";
@use "@sass-palette/helper";
@use "vuepress-shared/styles/shining";

.vp-hero {
  &-info-wrapper {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-inline: auto;

    &.fullscreen {
      height: calc(100vh - var(--navbar-height)) !important;
    }
  }

  &-info {
    z-index: 1;
    width: 100%;
    padding-inline: 2.5rem;

    @media (max-width: hope-config.$pad) {
      padding-inline: 1.5rem;
    }

    @media (min-width: hope-config.$pad) {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }

  &-mask {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-position: 50%;
    background-size: cover;

    &::after {
      content: " ";

      position: absolute;
      inset: 0;
      z-index: 1;

      display: block;
    }

    &.light {
      display: block;

      [data-theme="dark"] & {
        display: none;
      }
    }

    &.dark {
      display: none;

      [data-theme="dark"] & {
        display: block;
      }
    }
  }

  &-infos {
    z-index: 1;
    margin: 0 0.5rem;
  }

  &-image {
    display: block;
    max-width: 100%;
    max-height: 18rem;
    margin: 1rem;

    @media (max-width: hope-config.$pad) {
      margin: 2rem auto;
    }

    @media (max-width: hope-config.$tablet) {
      max-height: 16rem;
      margin: 1.5rem auto;
    }

    @media (max-width: hope-config.$mobile) {
      max-height: 14rem;
    }

    &.light {
      display: block;

      [data-theme="dark"] & {
        display: none;
      }
    }

    &.dark {
      display: none;

      [data-theme="dark"] & {
        display: block;
      }
    }
  }

  &-title {
    margin: 0.5rem 0;

    background: linear-gradient(
      120deg,
      var(--vp-c-accent-hover),
      var(--vp-c-accent) 30%,
      color.adjust(helper.get-color(hope-palette.$vp-c-accent), $hue: 60deg)
        100%
    );
    background-clip: text;

    font-weight: bold;
    font-size: 3.6rem;
    font-family: var(--vp-font);
    line-height: 1.5;

    -webkit-text-fill-color: transparent;

    @media (max-width: hope-config.$tablet) {
      margin: 0;
    }

    @media (max-width: hope-config.$pad) {
      font-size: 2.5rem;
      text-align: center;
    }

    @media (max-width: hope-config.$tablet) {
      font-size: 2.25rem;
      text-align: center;
    }

    @media (max-width: hope-config.$mobile) {
      margin: 0 auto;
      font-size: 2rem;
    }

    [data-theme="dark"] {
      background: linear-gradient(
        120deg,
        var(--vp-c-accent-hover),
        var(--vp-c-accent) 30%,
        color.adjust(
            helper.get-dark-color(hope-palette.$vp-c-accent),
            $hue: 60deg
          )
          100%
      );
    }
  }
}

#main-description,
.vp-hero-actions {
  margin: 1.8rem 0;

  @media (max-width: hope-config.$tablet) {
    margin: 1.5rem 0;
  }

  @media (max-width: hope-config.$pad) {
    margin: 1.5rem auto;
    text-align: center;
  }

  @media (max-width: hope-config.$mobile) {
    margin: 1.2rem 0;
  }
}

#main-description {
  max-width: 35rem;

  color: var(--vp-c-text-mute);

  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.3;

  @media (max-width: hope-config.$tablet) {
    font-size: 1.4rem;
  }

  @media (max-width: hope-config.$mobile) {
    font-size: 1.2rem;
  }
}

.vp-hero-action {
  display: inline-block;

  overflow: hidden;

  min-width: 4rem;
  margin: 0.5rem;
  padding: 0.5em 1.5rem;
  border-radius: 2rem;

  background: var(--vp-c-control);
  color: var(--vp-c-text);

  font-size: 1.2rem;
  text-align: center;

  transition:
    color var(--vp-t-color),
    color var(--vp-t-color),
    transform var(--vp-t-transform);

  @media (max-width: hope-config.$tablet) {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
  }

  @media (max-width: hope-config.$mobile) {
    font-size: 1rem;
  }

  @media print {
    text-decoration: none;
  }

  &:hover {
    background: var(--vp-c-control-hover);
  }

  &.primary {
    border-color: var(--vp-c-accent-bg);
    background: var(--vp-c-accent-bg);
    color: var(--vp-c-white);

    &:hover {
      border-color: var(--vp-c-accent-hover);
      background: var(--vp-c-accent-hover);
    }
  }

  .theme-container:not(.pure) &:active {
    transform: scale(0.96);
  }

  .vp-icon {
    margin-inline-end: 0.25em;
  }
}