@import './mixins.scss'
@import './tag.sass'

.embed
  video,
  iframe,
  object
    border: none
  .image-wrapper
    display: flex
  img
    cursor: pointer
    max-width: 100%
    max-height: 100%
    width: auto
    height: auto
    margin: auto

details
  summary
    cursor: pointer

details.embed
  summary
    display: block
    position: relative
    padding-left: calc(var(--theme-spacing) * 2)
    &::before
      @include svgMask('/assets/icons/triangle.svg', contain)
      content: ''
      display: block
      position: absolute
      top: 0
      left: 0
      width: var(--theme-spacing)
      height: var(--theme-spacing)
      transform: rotate(90deg)
      animation-duration: var(--theme-transition-duration)
      animation-timing-function: var(--theme-transition-function)
details.embed[open='']
  summary
    &::before
      transform: rotate(180deg)

details.embed.closing
  summary
    &::before
      animation-name: details-arrow
      animation-direction: reverse

details.embed.opening
  summary
    &::before
      animation-name: details-arrow
      animation-direction: normal

@keyframes details-arrow
  0%
    transform: rotate(90deg)
  100%
    transform: rotate(180deg)