// tag-hide
.hide-inline,
.hide-block
  & > .hide-button
    display: inline-block
    padding: 5px 18px
    background: $tag-hide-bg
    color: var(--white)
    addBorderRadius()
    @extend .btn-effects

    &:hover
      background-color: var(--btn-hover-color)

    &.open
      display: none

      & + div
        display: block

      & + span
        display: inline

  & > .hide-content
    display: none

.hide-inline
  & > .hide-button
    margin: 0 6px

  & > .hide-content
    margin: 0 6px

.hide-block
  margin: 0 0 16px

.toggle
  margin-bottom: 20px
  border: 1px solid $tag-hide-toggle-bg
  addBorderRadius(5, true)

  & > .toggle-content
    margin: 30px 24px

  & > .toggle-button
    padding: 6px 15px
    background: $tag-hide-toggle-bg
    color: #1F2D3D
    list-style: none
    cursor: pointer

    &::-webkit-details-marker
      display: none

    &::before
      @extend .fontawesomeIcon
      margin-right: 8px
      content: '\f0d7'
      transition: transform .3s ease
      transform: rotate(-90deg)
      transform-origin: center center

  &[open] summary::before
    transform: rotate(0)