/**
 * @file
 * Twitter
 *
 * Contains styles for twitter object.
 */

.twitter {

 h2 {
  @include fontsize(42px);
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 32px;

  @media (min-width: $break-large) {
   @include fontsize(54px);
  }
 }

 .cta--twitter {
  @include cta(secondary, dark);
  width: fit-content;
  margin-bottom: 32px;
  border-radius: 8px;
  position: relative;
  @include fontsize(18px);
  line-height: 1.3;
  text-transform: capitalize;
  font-family: $font-acumen;
  padding: 14px 15px 14px 50px;
   &:after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.60639 19.4395C14.529 19.4395 18.8635 12.1288 18.8635 5.79101C18.8635 5.58549 18.8594 5.3754 18.8512 5.16988C19.6944 4.49088 20.4221 3.64983 21 2.68627C20.2147 3.07532 19.3809 3.32941 18.5272 3.43985C19.4261 2.83983 20.0992 1.89724 20.4217 0.786799C19.576 1.34488 18.6511 1.73856 17.6868 1.95096C17.037 1.18217 16.1779 0.673143 15.2422 0.502573C14.3066 0.332003 13.3465 0.509393 12.5105 1.00732C11.6745 1.50524 11.0091 2.29597 10.6171 3.25724C10.2252 4.21851 10.1285 5.29679 10.3421 6.32537C8.62968 6.22968 6.95444 5.73435 5.42498 4.87148C3.89552 4.00862 2.54598 2.79748 1.46385 1.31659C0.91385 2.37249 0.745549 3.62196 0.993152 4.81107C1.24075 6.00018 1.88568 7.03969 2.79686 7.71835C2.1128 7.69416 1.44373 7.48908 0.844922 7.12005V7.17942C0.844309 8.28751 1.18834 9.36164 1.81852 10.2192C2.44871 11.0768 3.32616 11.6649 4.30172 11.8836C3.66805 12.0766 3.00298 12.1048 2.35799 11.9658C2.63327 12.9187 3.16888 13.7522 3.89005 14.3499C4.61122 14.9476 5.48198 15.2797 6.3808 15.2998C4.85487 16.6345 2.9699 17.3584 1.02949 17.355C0.685376 17.3544 0.341599 17.3309 0 17.2847C1.97125 18.6929 4.26434 19.4408 6.60639 19.4395Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
    background-size: cover;
    width: 20px;
    height: 20px;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
   }

  &:hover {
   &:after {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.60639 19.4395C14.529 19.4395 18.8635 12.1288 18.8635 5.79101C18.8635 5.58549 18.8594 5.3754 18.8512 5.16988C19.6944 4.49088 20.4221 3.64983 21 2.68627C20.2147 3.07532 19.3809 3.32941 18.5272 3.43985C19.4261 2.83983 20.0992 1.89724 20.4217 0.786799C19.576 1.34488 18.6511 1.73856 17.6868 1.95096C17.037 1.18217 16.1779 0.673143 15.2422 0.502573C14.3066 0.332003 13.3465 0.509393 12.5105 1.00732C11.6745 1.50524 11.0091 2.29597 10.6171 3.25724C10.2252 4.21851 10.1285 5.29679 10.3421 6.32537C8.62968 6.22968 6.95444 5.73435 5.42498 4.87148C3.89552 4.00862 2.54598 2.79748 1.46385 1.31659C0.91385 2.37249 0.745549 3.62196 0.993152 4.81107C1.24075 6.00018 1.88568 7.03969 2.79686 7.71835C2.1128 7.69416 1.44373 7.48908 0.844922 7.12005V7.17942C0.844309 8.28751 1.18834 9.36164 1.81852 10.2192C2.44871 11.0768 3.32616 11.6649 4.30172 11.8836C3.66805 12.0766 3.00298 12.1048 2.35799 11.9658C2.63327 12.9187 3.16888 13.7522 3.89005 14.3499C4.61122 14.9476 5.48198 15.2797 6.3808 15.2998C4.85487 16.6345 2.9699 17.3584 1.02949 17.355C0.685376 17.3544 0.341599 17.3309 0 17.2847C1.97125 18.6929 4.26434 19.4408 6.60639 19.4395Z' fill='#{str-replace(#{$color-blue-dark}, '#', '%23')}'/%3E%3C/svg%3E");
   }
  }

  @media (min-width: $break-medium) {
   padding: 13px 16px 11px 51px;
  }

  @media (min-width: $break-large) {
   @include fontsize(24px);
   line-height: 1.3;
  }
 }

 &__account {

 }

 &__item {
  padding: 20px;
  border: 3px solid $color-blue-dark;
  border-radius: 8px;
  margin: 0 0 16px;

  a {
   font-weight: 600;
   color: $color-blue-dark;
   word-break: break-all;
   background-image: linear-gradient(to right, $color-blue-dark 50%, $color-blue-dark 50%);
   background-position: left 89%;
   background-size: 100% 1px;
   background-repeat: repeat-x;
 
   &::before {
      content: none;
   }

   &:hover {  
      color: $color-green;
      background-position: left 100%;
      background-image: linear-gradient(to right, $color-green 50%, $color-green 50%);
   }
  }
 }

 &__body {
  position: relative;
  height: 100%;
  padding-bottom: 40px;

  @media (min-width: $break-medium) {
   padding-bottom: 48px;
  }

  @media (min-width: $break-large) {
   padding-bottom: 55px;
  }
 }

 &__time {
  position: absolute;
  bottom: 0;
  left: 0;
 }

 //## Animation triggers
 .twitter__item.scroll-animate {
    @include slide-fade-in;
 }
 .scroll-animate.js-active + .scroll-animate.js-active {
  transition-delay: 100ms;

  & + .scroll-animate.js-active {
   transition-delay: 200ms;
  }
 }
}

 .twitter__item:last-child,
 .twitter__item:nth-child(4){
  display: none;
 }