@import settings

.google-analytics-message
  position: fixed
  left: 0
  bottom: 0
  z-index: 2
  display: none
  width: 100%
  background-color: $white
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12)
  +resolution(0, 991)
    padding: 32px
  +resolution(992, 1200)
    padding: 32px 50px
  +resolution(1201)
    padding: 32px

  &.open
    display: flex
    justify-content: center
    box-sizing: border-box

  .containerCustom
    display: flex
    flex-direction: column
    position: relative
    box-sizing: border-box
    +resolution(0, 575)
      padding: 0
    +resolution(576)
      padding: 0
    +resolution(992, 1200)
      max-width: unset

    svg
      position: absolute
      z-index: 3
      right: 0
      width: 18px
      height: 18px
      top: 0
      stroke: $grey-dark
      transition: stroke 250ms linear

      &:hover
        stroke: $primary
      &:active
        stroke: $secondary

    h5
      font-weight: 600
      letter-spacing: -0.04em
      +resolution(0, 575)
        font-size: 16px
      +resolution(576)
        font-size: 20px

    p
      font-family: $r
      letter-spacing: $em
      color: $grey-dark
      font-weight: 400
      margin-top: 16px
      +resolution(0, 575)
        font-size: 14px
      +resolution(576)
        font-size: 16px
      +resolution(992)
        max-width: 95%

    .buttons
      display: grid
      margin-top: 24px
      +resolution(576)
        grid-template-columns: auto auto 1fr
        grid-column-gap: 20px
      +resolution(0, 575)
        grid-column-gap: 10px
        grid-template-columns: 1fr 1fr

      .accept,
      .decline
        height: 40px
        border-radius: 4px
        display: flex
        justify-content: center
        align-items: center
        font-family: $a
        font-weight: 700
        letter-spacing: $em
        font-size: 16px
        +resolution(576)
          width: 120px
        +resolution(0, 575)
          width: 100%

      .accept
        color: $white
        border: none
        transition: outline 250ms linear
        position: relative
        z-index: 2
        background-color: #FFBF12

        &::before
          content: ''
          position: absolute
          top: 0
          left: 0
          background: linear-gradient(135deg, #FF9000 0%, #FFBF12 100%)
          width: 100%
          height: 100%
          transition: opacity 0.250s linear
          z-index: -1
          border-radius: 4px

        &:hover
          &::before
            opacity: 0.2

        &:active
          outline: 3px solid rgba(255, 144, 0, 0.25)

          &::before
            opacity: 0.80

      .decline
        color: $black
        border: 2px solid $primary
        background-color: transparent
        transition: color 250ms linear, outline 250ms linear, border-color 250ms linear

        &:hover
          color: $primary
          border-color: $secondary

        &:active
          color: $black
          border-coolor: $primary
          outline: 3px solid rgba(255, 144, 0, 0.25)