$card-border: 1px solid #dfdfdf;
$radius: rem-calc(8px);
$details-link-color: #4a4a4a;
$details-link-border: 1px solid #b2b2b2;
$policy-hat-height: ru(.25);
$content-margin: ru(1.5);
$content-margin-top: ru(.5);

.featured-policy-card {
  border: $card-border;
  background-color: color('neutral-8');
  display: flex;
  flex-direction: column;
  height: 100%;

  .details-link {
    @include typography-7(false);

    padding-bottom: 2px;
    color: $details-link-color;
    border-bottom: $details-link-border;
    text-decoration: none;
    display: none;

    &:hover {
      border-color: $details-link-color;
    }
  }
}

.default-text {
  text-align: center;
}

.content {
  margin: $content-margin-top $content-margin $content-margin $content-margin;
  background-color: color('neutral-8');
  border-radius: $radius;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;

  &.policy-hat {
    position: relative;

    &:before {
      position: absolute;
      content: '';
      display: block;
      height: $policy-hat-height;
      background: color('secondary-3');
      width: 100%;
      top: calc(-#{$policy-hat-height} + -#{$content-margin-top});
      left: 0;
    }
  }
}

.premium {
  margin-top: auto;
  text-align: center;
}

.value {
  display: flex;
  justify-content: center;

  &-small {
    padding-top: rem-calc(8px);
  }

  &-dollars {
    @include typography-a-2-bold;
  }

  &-format {
    align-self: flex-end;
    padding-bottom: rem-calc(11px);
  }
}

.carrier-logo {
  align-items: center;
  display: flex;
  height: rem-calc(60px);
  justify-content: center;
  max-width: rem-calc(170px);

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

.policy-info {
  width: 100%;

  &-item {
    align-items: center;
  }

  &-tooltip-group {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    text-align: right;
  }

  &-tooltip-label {
    border-bottom: 1px solid color('neutral-3');
    cursor: help;
    padding-bottom: 2px;
    white-space: nowrap;
  }

  &-tooltip-icon {
    margin-left: ru(.25);
  }
}

.button-group {
  width: 100%;
  text-align: center;
}

.secondary-action {
  &:first-child {
    padding-right: ru(.25);
  }

  &:last-child {
    padding-left: ru(.25);
  }
}

@media #{$medium-up} {
  .featured-policy-card {
    .details-link {
      display: inline-block;
    }
  }

  .secondary-actions-wrapper {
    display: none;
  }
}

@media #{$IE} {
  .carrier-logo {
    img {
      max-width: inherit;
    }
  }
}