@import ../mixins
@import ../variables

.sidebar
  background-color: $primary
  bottom: 0
  display: flex
  flex: 0 0 auto
  flex-direction: column
  left: -15rem
  padding: 2rem
  position: absolute
  top: 0
  transition: left 0.2s, margin-left 0.2s
  width: 15rem
  z-index: 2

  @include breakpoint($regular)
    left: 0
    margin-left: -15rem
    position: relative

  a
    color: white
    text-decoration: none

    &:hover
      text-decoration: underline

  &__heading
    line-height: 1
    margin: 0 0 1rem
    text-transform: uppercase

    span
      font-size: 1.25rem

  &__content
    flex: 1

    p
      margin-bottom: 1rem

  &__footer
    border-top: 1px solid rgba(0,0,0,.12)
    padding: 1rem 0

  &__agreement
    font-size: 0.75rem

  &__social
    font-size: 0.85rem
    margin-bottom: 1rem

  &__overlay
    background-color: rgba(0,0,0,.5)
    top: 0
    bottom: 0
    left: 0
    opacity: 0
    right: 0
    pointer-events: none
    transition: opacity 0.2s
    position: absolute
    z-index: 1

  &__toggle
    display: none

    &:checked
      @include breakpoint($regular)
        & ~ main
          transform: scale(0.9)

      & ~ .sidebar__overlay
        opacity: 1

      & ~ .sidebar
        left: 0

        .sidebar__toggle-button svg
          transform: rotateZ(90deg)

        @include breakpoint($regular)
          margin-left: 0

    &-button
      background-color: $primary
      cursor: pointer
      font-size: 0.75rem
      height: 3rem
      padding: 0.75rem
      position: absolute
      right: -3rem
      text-align: center
      top: 0
      width: 3rem

      &:hover svg
        transform: rotateZ(90deg)

      svg
        fill: white
        height: 100%
        transition: transform 0.2s
        width: 100%
