/* @cta */
.cta {
  box-sizing: border-box;
  cursor: pointer;
  border-radius: $border-radius-square !important;
  padding: $small-spacing $base-spacing;
  color: $white;
  display: inline-block;
  text-decoration: none;
  transition: background-image 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  max-width: 100%; //ie fix
  line-height: 1.2;
  transform: translateX(0);

  @include themify($themes) {
    font-family: themed('ctaFont');
    font-size: themed('ctaFontSize');
  }

  &__label {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: -2px;
    color: $white;
    transition: 0.3s;

    @include themify($themes) {
      color: themed('ctaLabelPrimary');
    }

    svg {
      position: relative;
      height: 16px;
      width: 16px;
      margin-left: $small-spacing;
      fill: white;
      flex-shrink: 0;

      @include themify($themes) {
        fill: themed('ctaSVGFillPrimary');
      }

    }
  }

  &--primary {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 100%;
      background-image: linear-gradient(to right, #014e96, $azure-radiance 50%);
      transition: 0.6s;
      transform: translateX(0);

      @include themify($themes) {
        background-image: linear-gradient(to right, themed('ctaGradient'), themed('ctaColor') 50%);
      }
    }
  }

  &--secondary {
    background-color: white;

    @include themify($themes) {
      color: themed('ctaColor');

      .cta__label {
        color: themed('ctaLabelSecondary');

        svg {
          // fill: themed('ctaColor');
          fill: themed('ctaSVGFillSecondary');
        }
      }

      &:hover,
      &:focus {
        // background-color: #f6f6f6;
        background-color: themed('ctaSecondaryHoverBackground');
        .cta__label {
          color: themed('ctaLabelSecondary');
        }
      }
    }
  }

  &--link {
    background-color: transparent;
    padding-left: 0 !important;

    @include themify($themes) {
      color: themed('ctaLabelLink');

      .cta__label {
        color: themed('ctaLabelLink');

        svg {
          // fill: themed('ctaColor');
          fill: themed('ctaSVGFillLink');
        }

        .video-icon {
          width: 12px;
          height: 12px;
          background-color: themed('ctaColor');
          border-radius: $border-radius-circle;   
          margin-left: 10px;
          margin-top: -4px;
          
          svg {
            // fill: white;
            fill: themed('ctaSVGFillLink');
          }
        }
      }
      

      &:hover,
      &:focus {
        .cta__label {
          color: themed('ctaLabelLinkHover');

          svg {
          // fill: themed('ctaColor');
            fill: themed('ctaLinkSVGFillHover');
          }
        }
      }
    }

    .hero & {
      color: $white !important;
       @include themify($themes) {
        .cta__label {

          color: themed('ctaLabelLinkOnDark');

          svg {
            // fill: $white !important;
            fill: themed('ctaSVGFillLinkOnDark');
          }
        }
      }
    }
  }

  &--blue {
    color: $white;
    background-color: $blue-ribbon;
  }

  &:hover,
  &:focus {
    transition: $transition-basic;
    text-decoration: none;

    &::before {
      transform: translateX(-50%);
    }
  }

  &:active {
    box-shadow: 0 0 0 transparent !important;
  }

  ::selection {
    color: white;
    background-color: $azure-radiance;
  }
}