$border: #dfdfdf;
$footer: #f6f6f6;

@mixin section($grow, $basis, $centered) {
  flex: #{$grow} 1 #{$basis};
  padding: 0 ru(1.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  @if $centered {
    align-items: center;
  }
}

.policy-card {
  border: 1px solid $border;
  background-color: color('neutral-8');
  display: none;

  &.selected {
    border: 1px solid color('secondary-1');
  }
}

.body {
  padding: rem-calc(20px) rem-calc(36px) ru(1) rem-calc(12px);
  display: flex;
  align-items: center;
}

.compare-logo-section {
  display: flex;
  flex: 1 1 37.5%;
}

.divider {
  height: ru(3.25);
  border-left: 1px solid $border;
}

.node {
  display: inline-block;
  @include typography(7);
  color: color('neutral-3');
  padding-right: ru(.5);
}

.checkbox-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: rem-calc(8px) 0;

  &:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    content: '';
    cursor: pointer;
  }
}

.checked {
  font-weight: 600;
}

.carrier-img {
  align-items: center;
  display: flex;
  height: rem-calc(42px);
  justify-content: center;
  max-width: rem-calc(127px);

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

.premium {
  text-align: center;
  white-space: nowrap;
}

.policy-tooltip {
  > * {
    display: flex;
    align-items: center;
  }
}

.policy-type-hover-message {
  left: 50%;
  top: calc(100% + 18px);
  width: ru(11.5);
}

.policy-type-tooltip {
  cursor: help;
}

/* IE 11 hack to make sure svg does not take up 100% height */
.svg-text {
  max-height: ru(1);
}

.actions p {
  font-size: 15px;
  white-space: nowrap;
}

@media #{$small-only} {
  .policy-tooltip {
    > * {
      justify-content: center;
    }
  }

  .body {
    flex-direction: column;
  }

  .footer {
    justify-content: center;
    text-align: center;
  }

  .actions {
    padding: ru(1);
    text-align: center;
    border-top: 1px solid $border;
    width: 100%;
  }

  .policy-type {
    padding: ru(1);
    text-align: center;
  }

  .carrier-logo {
    text-align: center;
  }

  .policy-name {
    max-width: 140px;
    margin: auto;
    margin-bottom: ru(.5);
    line-height: ru(1);
  }

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

@media #{$small-and-medium-only} {
  .continue {
    margin-bottom: ru(.75);
  }
}

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

  .mobile-card {
    display: none;
  }

  .compare {
    label { margin-left: rem-calc(8px); }
    padding: 0 rem-calc(30px);
  }

  .carrier-logo {
    @include section(1, 20%, true);
    padding: 0 rem-calc(12px);
  }

  .premium {
    @include section(1, 25%, false);
    padding: 0 rem-calc(12px);
  }

  .actions {
    @include section(1, 25%, true);
    text-align: center;
    padding: 0 0 0 rem-calc(6px);
  }
}

@media #{$large-up} {
  .compare {
    max-width: ru(5.25);
  }

  .carrier-logo {
    padding: 0px rem-calc(18px);
  }

  .info-divider {
    display: block;
  }
}