.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 #21252b

      &::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
        padding 0 0.1rem
        opacity 0
        transition-t("opacity", "0", "0.2", "ease-in-out")

        i {
          font-size 1rem
        }
      }
    }
  }


  .code-tools-box {
    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
    }


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

      i {
        font-size 0.8rem
      }
    }


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


  figure.highlight {
    margin 0

    &.folded {
      height 0
    }
  }
}