@import "../../../basic"

#prodList

  button#close-filter
    font-size: 1.6rem
    display: none
    position: absolute
    right: 1.5rem
    top: -0.6rem
    min-width: auto
    padding-top: 1rem
    line-height: 1

  .day
    border-bottom: 1px solid var(--color-red-to-black)
    margin-top: 3.6rem
    padding-bottom: 0
    padding-top: 1.8rem

    &:first-child
      margin-top: 0

    &:last-child, &.lastOne
      border: none

    .dateBox
      .dayDate
        padding-top: 1.8rem
        background: $white
        position: relative
        z-index: 480

        h2.big
          margin-bottom: .9rem

      &.sticky
        .dayDate
          position: fixed
          top: 0
          left: 0
          width: 100%
          z-index: 450
          -webkit-transform: translateY(0%)
          transform: translateY(1%)

        //&.showIt
        //  .dayDate
        //    transition: transform $transitionDuration $transitionTimingFunction
        //    -webkit-transform: translateY(0%)

  .item
    margin-bottom: 7.2rem
    position: relative
    margin-top: 1.7rem
    +floaty

    .date
      font-size: $font_h3-size
      line-height: $font_h3_line-height
      margin-bottom: 1.6rem
      max-width: 70rem

      &.big
        position: relative
        padding-left: 7.5rem

        &.fulltime
          padding-left: 13.5rem

        strong
          position: absolute
          top: 0
          left: 0

      a
        color: $black

        &:hover, &:active, &:focus:active,
        &:focus-visible, &:focus-visible:focus
          color: var(--color-hover-to-black)

      .maps
        display: none

    &.canceled
      h3, h4, p
        color: $black-light

      .image
        .overlay
          .tag
            background: $grey-1
            color: $black

            &:before, &:after
              background: $grey-1

  .infoBox
    +floaty
    position: relative

    .button-wrap
      button[class^='d-']
        display: none

    // todo: Check Focus
    &:hover, &:focus, &:active, &:focus:active
      .image
        img
          opacity: .3

    h3
      font-size: $font_h2-size
      line-height: $font_h2_line-height
      margin: $font_h2_margin
      padding-right: 4.5rem

    h4
      font-size: $font_h3-size
      line-height: $font_h3_line-height
      margin: 0 0 .7rem 0

    p
      font-size: $font_text_small
      line-height: $font_text_small_line-height

      a
        text-decoration: underline

    .primary-btn
      &.ticketbtn,
      &.ticket-btn
        position: absolute
        right: 1.7rem
        bottom: 1.7rem
        z-index: 50

    .wrappedLink
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: 25

  .content
    padding: 1.7rem 1.7rem 8rem 1.7rem
    position: relative

    &.two-buttons
      padding-bottom: 16rem

      .button-wrap
        position: absolute
        right: 1.7rem
        bottom: 1.7rem
        z-index: 50

      .primary-btn
        &.ticketbtn,
        &.ticket-btn
          float: right
          position: relative
          right: 0
          bottom: 0

    a
      position: relative
      z-index: 50

    &.singleProd
      padding: 1.7rem
      color: $black

      h2
        margin-bottom: 0

      h3
        margin-top: 1rem
        margin-bottom: 0

        &:first-child
          margin: 0

  .image
    width: 52.4rem
    position: relative

    img
      opacity: 1
      transition: opacity $transitionDuration $transitionTimingFunction

    .imgBox
      background: $black

    .overlay
      position: absolute
      left: -.9rem
      top: 2.3rem
      z-index: 10

      .tag
        position: relative
        left: -8%
        top: 0
        -webkit-transform: rotate(-23deg)
        transform: rotate(-23deg)
        transform-origin: top right
        background: $brand-color-1
        color: $white
        border: none
        margin: 0
        +primary-font-bold
        font-size: $font_text_normal
        padding: 1.2rem 2rem 1.1rem

        &:before, &:after
          content: ''
          display: block
          position: absolute
          background: $brand-color-1
          width: 20px
          top: 0
          height: 100%
          z-index: 10
          -webkit-transform: skew(-23deg)
          transform: skew(-23deg)

        &:before
          left: -9px

        &:after
          right: -9px

        span
          position: relative
          z-index: 20
          white-space: nowrap

      .no-js &
        top: .7rem

        .tag
          -webkit-transform: none
          transform: none
          left: 0

  .favorites
    position: absolute
    right: 1.7rem
    top: 1.5rem
    font-size: 3.7rem
    cursor: pointer
    z-index: 50

    span
      text-decoration: underline
      font-size: $font_h5-size
      line-height: $font_h5_line-height
      margin-left: .8rem

    .firstIcon, .secondIcon
      transition: opacity $transitionDuration $transitionTimingFunction, color $transitionDuration $transitionTimingFunction
      line-height: 1
      float: left

    .firstIcon
      opacity: 1

    .secondIcon
      position: absolute
      top: 0
      left: 0
      opacity: 0

    &.active
      .firstIcon
        opacity: 0

      .secondIcon
        opacity: 1

  .colorBack
    .favorites
      color: $white

    .content.singleProd
      color: $white

  .colorBack-2
    .favorites
      color: var(--color-red-to-black)

  .colorBack, .colorBack-2
    .favorites
      // todo: Check Focus
      &:hover, &:focus, &:active, &:focus:active
        color: var(--color-black-to-white)

  .colorBack-2
    body.contrast &
      .favorites

        // todo: Check Focus
        &:hover, &:focus, &:active, &:focus:active
          color: black

      .ticketbtn.revert
        border-color: black

  // remove standard margin
  form .selectboxit-container,
  form input,
  form textarea
    margin: 0

  #prodFilter
    position: relative
    z-index: 500

    &.sticky
      .filter
        position: fixed
        top: 0
        left: 0
        width: 100%
        z-index: 500
        -webkit-transform: translateY(-100%)
        transform: translateY(-100%)

        .module
          margin: 0

      &.showIt
        .filter
          transition: transform $transitionDuration $transitionTimingFunction
          -webkit-transform: translateY(0%)
          transform: translateY(0%)

      #close-filter
        display: block

    .filter
      background: $white


  #filterButton
    position: fixed
    top: 0
    left: 0
    width: 100%
    z-index: 500
    transition: transform $transitionDuration $transitionTimingFunction
    -webkit-transform: translateY(-100%)
    transform: translateY(-100%)

    &.showIt
      -webkit-transform: translateY(0%)
      transform: translateY(0%)

    button
      margin-top: 0

      &.backgroundBox
        border-top: none

    .no-js &
      display: none

  @media screen and (max-width: 1469px)
    .image
      width: 42rem

    .item
      .date
        max-width: 50rem

  @media screen and (max-width: 1199px)
    .image
      width: 35rem

    .item
      .date
        max-width: 35rem

  @media screen and (max-width: 991px)
    .filter
      .module
        padding-bottom: 1.4rem
      .input-block
        margin-bottom: 2.2rem

    .image
      width: 100%

      img
        width: 100%

    .item
      .date
        max-width: none

    .infoBox
      .styled-table, .styled-cell
        display: block

      h3
        padding-right: 4.5rem

    .favorites
      font-size: 1.9rem
      bottom: 2.5rem
      left: 1.7rem
      top: auto
      right: auto

      i, span
        float: left

      span
        margin-top: .2rem

  @media print
    #filterButton
      display: none

    #prodFilter
      position: absolute
      top: 0
      width: 100%
      height: auto!important
      left: 0
      padding-left: 8rem

      .module
        margin-bottom: 0
        padding-bottom: 1rem
        padding-top: 2rem

    .dateBox
      height: auto!important

    #prodFilter.sticky .filter,
    .day .dateBox.sticky .dayDate
      position: relative
      transform: none
      top: 0!important

    .favorites
      font-size: 2.5rem
      right: 0

    .content
      padding-top: 0
      padding-right: 3rem
      padding-bottom: 1rem

    .image
      width: 20rem

      .overlay
        left: 0
        top: 0

        .tag
          background: white!important
          transform: none
          text-decoration: underline
          top: 0
          left: 0
          padding: .8rem
          font-size: 1.4rem
          border: 1px solid black

    .item
      margin-bottom: 1.5rem

      .date
        font-size: 1.4rem

    .day
      margin-top: 0
      padding-top: 1rem
      break-inside: avoid

    .infoBox
      h3
        font-size: 2rem

      h4
        font-size: 1.4rem

      p
        font-size: 1.4rem

      .primary-btn
        &.ticketbtn,
        &.ticket-btn
          padding: 0
          position: static
          margin-top: 1rem

    a.primary-btn.no-btn, a.primary-btn,
    button.primary-btn.no-btn, button.primary-btn
      font-size: 1.4rem

    form .selectboxit-container *
      font-size: 1.2rem

    form .selectboxit-container .selectboxit-arrow-container .selectboxit-arrow
      display: none

    form .selectboxit-container span,
    form .selectboxit-container .selectboxit-options a
      height: 2.6rem

    form .selectboxit-container .selectboxit[class*=tia-icon-]
      padding-left: 2.8rem

    form .selectboxit-container .selectboxit.tia-icon-cal:before,
    form .selectboxit-container .selectboxit.tia-icon-pin:before,
    form .selectboxit-container .selectboxit.tia-icon-logo:before
      font-size: 1.6rem