.highlight-container {
  position relative
  box-sizing border-box
  margin 1.4rem 0

  &.mac {
    margin 1.4rem 0 1.8rem 0
    box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)

    &:hover {
      .code-tools-box .copy {
        opacity 1
      }
    }


    .code-tools-box {
      justify-content flex-end
      padding 0.4rem 0.6rem 0.7rem 0.4rem
      background var(--mac-toolbar-background-color)

      &::before {
        position absolute
        left 0.8rem
        width 0.76rem
        height 0.76rem
        background #fc625d
        border-radius 50%
        box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
        content ''
      }


      &.folded {
        border-bottom-right-radius 0
        border-bottom-left-radius 0

        .copy {
          display none
        }
      }


      .code-lang {
        order 1
        color #bbb
      }


      .fold {
        order 2
        padding 0 0.1rem 0 0.6rem

        i {
          color #ccc
        }
      }


      .copy {
        position absolute
        top 3rem
        right 0.5rem
        box-sizing border-box
        padding 0 0.1rem
        opacity 0
        transition-t("opacity", "0", "0.2", "ease-in-out")

        i {
          font-size 1rem
        }
      }
    }
  }


  .code-tools-box {
    position relative
    z-index $z-index-1
    display flex
    align-items center
    justify-content space-between
    box-sizing border-box
    width 100%
    padding 0.3rem 0.4rem
    color var(--toolbar-foreground)
    background var(--toolbar-background)
    border-top-left-radius 0.3rem
    border-top-right-radius 0.3rem


    &.folded {
      border-bottom-right-radius 0.3rem
      border-bottom-left-radius 0.3rem
    }


    .code-lang {
      justify-content flex-start
      margin-left 0.2rem
      font-weight 600
      font-size 0.9rem
      font-family "Source Code Pro", consolas, Menlo
      if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'default') {
        color var(--text-color-3)
      }
    }


    .tool {
      disable-user-select()
      cursor pointer

      i {
        font-size 0.9rem
        if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'default') {
          color var(--text-color-3)
        }
      }
    }


    .fold {
      padding 0 0.4rem 0 0.2rem
    }
  }


  figure.highlight {
    margin 0

    &.folded {
      height 0 !important
    }
  }
}


figure.highlight {
  position relative
  box-sizing border-box
  overflow-y hidden

  transition-t("height", "0", "0.2", "linear")

  .shrink-line {
    position absolute
    left 0
    box-sizing border-box
    width 100%
    background linear-gradient(to bottom, var(--shrink-line-background-1), var(--shrink-line-background-2))
    cursor pointer

    &::before {
      color var(--text-color-4)
      font-weight 600
      font-size 1rem
      font-family 'Font Awesome 6 Free'
      content '\f103'
    }

    &:hover {
      &::before {
        font-size 1.1rem
      }
    }
  }
}