/**
 * @file
 * Cards.
 */

%section-card {
  background-color: $white;
  border: 1px solid $link-water;
  border-radius: $nttdata-radius;
  box-shadow: 0 1px 8px 1px $shadow-15;
}

%nttdata-card,
.nttdata-card {
  padding: 2.5rem 1.5rem 3rem;
  position: relative;
  background-color: $u-smart-navy;
  overflow: hidden;
  border: none;
  border-radius: 0 3rem 0 0;
  &:hover {
    .transition-arrow {
      path {
        fill: $black-pearl;
      }
      &:after {
        -webkit-transform: translateX(-3.5rem) translateY(-2.5rem) rotate(0deg);
        -ms-transform: translateX(-3.5rem) translateY(-2.5rem) rotate(0deg);
        transform: translateX(-3.5rem) translateY(-2.5rem) rotate(0deg);
        -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        transform-origin: 0 50%;
        transition: all 0.6s cubic-bezier(0, 1, 0.5, 1);
      }
      .nttdata-icon {
        transform: translatex(0.5rem);
      }
    }
  }
}

%nttdata-card-title,
.nttdata-card-title {
  font-size: 1.5625rem;
  line-height: 1.9375rem;
  letter-spacing: -0.3px;
  margin-bottom: 0.75rem;
  padding: 0;
  * {
    color: $text-white !important;
    &:hover {
      color: $text-white !important;
    }
  }
}

%nttdata-card-text,
.nttdata-card-text {
  margin: 0.5em 0 0.25em;
  font-size: 1rem;
  line-height: 1.5625rem;
  color: $cornflower-blue;
  font-weight: 300;
}