.floating-helper{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.floating-helper__layout{
  position: relative;
}

.floating-helper__trigger{
  position: fixed;
  right: 0;
  display: inline-flex;
  cursor: pointer;
  background-color: $white;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;

  &:active,
  &:focus{
    outline: $anchor-outline-focus;
    outline-color: var(--highlight);
    outline-offset: $anchor-outline-offset;
  }

  @include breakpoint(small only){
    bottom: $global-margin * 2;
  }

  @include breakpoint(medium){
    top: $global-margin * 2;
    position: absolute;
  }
}

.floating-helper__text{
  color: var(--secondary);
  background-color: rgba(var(--secondary-rgb), .1);
  font-size: rem-calc(14);
  font-weight: $global-weight-bold;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;
  padding: $global-padding * .125 $global-padding * .5 $global-padding * .125 $global-padding;
}

.floating-helper__icon{
  color: $white;
  background-color: var(--secondary);
  padding: $global-padding * .125 $global-padding * .5;
}

.floating-helper__wrapper{
  @include flex;
}

.floating-helper__content{
  background-color: rgba(var(--secondary-rgb), .1);
  border-top: 5px solid var(--secondary);
  margin-bottom: $global-margin * 3;
  padding: $global-padding * 2;
  width: 100%;

  @include breakpoint(medium){
    padding: $global-padding * 3 $global-padding * 2 $global-padding * 2;
  }
}

.floating-helper__content-inner{
  position: relative;

  @include breakpoint(medium){
    @include flexgap($global-margin * 3);
  }
}

.floating-helper__icon-big{
  border-radius: 50%;
  background-color: rgba(var(--secondary-rgb), .1);
  flex-shrink: 0;
  color: var(--secondary);

  @include flex;
  @include flex-align($x: center, $y: middle);
  @include square(70px);
}

.floating-helper__bottom{
  text-align: right;

  @include breakpoint(medium){
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.floating-helper__link{
  font-weight: $global-weight-bold;
  text-decoration: underline;
}

.floating-helper__content-close{
  background-color: var(--secondary);
  color: $white;
  flex-shrink: 0;
  cursor: pointer;

  @include flex;
  @include flex-align($x: center, $y: middle);
  @include square(1.5rem);

  &:active,
  &:focus{
    color: $white;
  }
}