if (hexo-config('first_screen')) {
  $temp-fs-bg-img-light = hexo-config('first_screen.background_img')
  $temp-fs-bg-img-dark = hexo-config('first_screen.background_img_dark')
}
else {
  $temp-fs-bg-img-light = ''
  $temp-fs-bg-img-dark = ''
}

$fs-bg-img-light = $temp-fs-bg-img-light ? $temp-fs-bg-img-light : '/images/bg.svg'
$fs-bg-img-dark = $temp-fs-bg-img-dark ? $temp-fs-bg-img-dark : $fs-bg-img-light

$root = hexo-config('root')

.first-screen-container {
  width 100%
  height 100vh
  overflow hidden
  background-image url($root + $fs-bg-img-light)
  background-position-x center
  background-position-y center
  background-size cover
  background-repeat-x no-repeat
  background-repeat-y no-repeat


  .dark-mode & {
    background-image url($root + $fs-bg-img-dark)
  }

  .first-screen-content {
    display flex
    flex-direction column
    align-items center
    justify-content space-between
    width 80%
    height 90%
    padding-top calc(var(--header-height) * 0.5)

    +keep-tablet() {
      padding-top calc(var(--header-height) * 0.5 * 0.9)
    }

    +keep-mobile() {
      padding-top calc(var(--header-height) * 0.5 * 0.8)
    }

    .description {
      display var(--first-screen-display)
      color var(--first-screen-font-color-light)
      font-weight bold
      font-size var(--first-screen-font-size)
      font-family var(--first-screen-font-family)
      line-height 1.8
      text-align center
      transform translateY(var(--first-screen-font-offset))
      opacity 0

      .dark-mode & {
        color var(--first-screen-font-color-dark)

        .desc-item {
          .desc
          .cursor {
            color var(--first-screen-font-color-dark)
          }
        }
      }


      .desc-item {
        .desc {
          color var(--first-screen-font-color-light)
        }

        .cursor {
          color var(--first-screen-font-color-light)
          animation blink-caret 0.8s step-end infinite
        }
      }


      +keep-tablet() {
        font-size calc(var(--first-screen-font-size) * 0.9)
      }
    }


    .bottom-placeholder {
      width 100%

      .sc-icon-list {
        display flex
        justify-content center

        .sc-icon-item {
          display flex
          align-items center
          margin 0 1rem
          cursor pointer

          i {
            color var(--first-screen-icon-color-light)
            font-size var(--first-screen-icon-size)
          }


          svg {
            width var(--first-screen-icon-size)
            height var(--first-screen-icon-size)

            path {
              fill var(--first-screen-icon-color-light)
            }
          }


          .dark-mode & {
            i {
              color var(--first-screen-icon-color-dark)
            }

            svg {
              path {
                fill var(--first-screen-icon-color-dark)
              }
            }
          }


          +keep-tablet() {
            i {
              font-size calc(var(--first-screen-icon-size) * 0.9)
            }

            svg {
              width calc(var(--first-screen-icon-size) * 0.9)
              height calc(var(--first-screen-icon-size) * 0.9)
            }
          }


          a {
            display flex !important
            align-items center !important
          }
        }
      }
    }
  }
}