/**
 * Buttons aside of the introduction block
 *
 * 1. Get the introduction buttons above the introduction block
 * 2. Give some horizontal offset from the introduction block
 * 3. Hide these buttons when viewport is becoming too small
 */

.intro-btns
  position: absolute
  top: -$navigationHeight /* 1 */
  right: -125px /* 2 */

  +respond-to-width(900)
    display: none /* 3 */


  /**
    * Styling of the introduction buttons
    *
    */

  .intro-btn
    width: 250px
    height: 200px


  /**
    * Styling of the call button
    *
    * 1. This fill colors the call icon
    * 2. This fill colors the call icon on hover
    */

  .btn-call
    +flex(center, center)
    +flex-direction(column)

    background:
      color: $btnCallBgColor

    color: $iconCallColor
    transition: background 0.3s, color 0.3s

    .icon
      width: 25px
      height: 25px

      #call-icon
        .cls-1
          fill: $iconCallColor /* 1 */

    &:hover
      cursor: pointer

      background:
        color: $btnCallHoverBgColor

      color: $iconCallHoverColor

      .icon
        animation: phone-rings 1.5s infinite ease

        #call-icon
          .cls-1
            fill: $iconCallHoverColor /* 2 */


  /**
    * Styling of the contact button
    *
    * 1. This fill colors the contact icon
    * 2. This fill colors the contact icon on hover
    */

  .btn-contact
    +flex(center, center)
    +flex-direction(column)

    background:
      color: $btnContactBgColor

    color: $iconContactColor
    transition: background 0.3s, color 0.3s

    .icon
      width: 25px
      height: 25px

      #contact-icon
        .cls-1
          fill: $iconContactColor /* 1 */

    &:hover
      cursor: pointer

      background:
        color: $btnContactHoverBgColor

      color: $iconContactHoverColor

      .icon
        animation: icon-move-left-and-right 0.5s infinite

        #call-icon
          .cls-1
            fill: $iconContactHoverColor /* 2 */


/**
    * Mobile call button
    * This button appears when the width of the viewport <= 900
    *
    * 1. Call button will float above the introduction text
    * 2. By default this button will not be showed
    */

.call-btn-mobile
  position: absolute
  left: 0
  top: -75px /* 1 */

  color: $white
  background-color: $primaryColor
  display: none /* 2 */
  width: 100%
  height: 75px

  cursor: pointer

  .icon
    width: 25px
    height: 25px
    margin-right: 10px

    #call-icon
      .cls-1
        fill: $iconCallColor

  +respond-to-width(900)
    +flex(center, center)