.facebook {
  @include flex(2rem, initial, center, row-reverse);

  position: fixed;
  bottom: 3rem;
  right: 6rem;
  z-index: 100;

  transition: $transition-regular;

  @include respond(tab-port) {
    display: none !important;
  }

  &.hidden {
    transform: scaleY(0);
  }

  &__circle {
    display: inline-block;

    height: 8rem;

    overflow: hidden;
    border-radius: 50%;
    filter: drop-shadow($shadow-grey);
    transition: $transition-regular;

    &:hover {
      transform: scale(1.1);
    }
  }

  &__image {
    height: 100%;
  }

  &__label {
    @include flex(0, center, center);

    width: 38rem;
    height: 3rem;

    transform-origin: right;

    color: $color-black;

    background-color: $color-white;
    border-radius: 24px;
    overflow: hidden;
    filter: drop-shadow($shadow-grey);
  }

  &__message {
    display: inline-block;

    font-family: $font-family-headings;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;

    padding: 0.25rem;

    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.75);
    cursor: pointer;

    &:hover {
      background-color: $color-black;
    }
  }

  &__close-icon {
    display: inline-block;

    color: $color-white;
    font-size: $font-size-small;

    vertical-align: middle;
  }
}
