@charset 'UTF-8';

.fixed-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $white-alpha-80;
  background-image: linear-gradient(0deg, $white, $white-alpha-0);
}

.fixed-cta-container {
  display: flex;
  padding-right: 100px;
  align-items: baseline;
  justify-content: flex-end;

  .btn {
    margin-left: 0.4em;
    min-width: 7em;
  }

  .fixed-cta-legend {
    text-align: right;
    text-shadow: 0 0 3px $white-alpha-40;
  }

  @media only screen and (max-width: $screen-xs-max) {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 1em;
    padding-left: 1em;

    .fixed-cta-legend {
      text-align: left;
      margin-bottom: 0.4em;
    }

    .btn-lg {
      margin-left: 0;
      padding: 7px 10px;
      font-size: 1em;
    }
  }
}