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

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

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

.policy-card {
  border: 1px solid $border;
  max-width: rem-calc(1200px);
  background-color: color('neutral-8');
  display: none;
}

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

.footer {
  background-color: $footer;
  border-top: 1px solid $border;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
  padding: ru(.5) ru(1.25);
  display: flex;
  flex-wrap: wrap;
}

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

.info-divider {
  display: none;
}

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

.policy-type > strong {
  display: block;
}

.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 {
  color: color('neutral-2');
  font-weight: 600;
}

.carrier-logo {
  height: ru(1.75);

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

.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;
}

.view-policy {
  width: rem-calc(160px);
  margin: auto;
}

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

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

  .body {
    flex-direction: column;
  }

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

  .divider {
    display: none;
  }

  .actions {
    padding: ru(1) ru(1) 0 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 {
    @include section(0, 10%, true);
    label { margin-left: rem-calc(8px); }
    min-width: ru(5.25);
  }

  .carrier-logo {
    @include section(0, 15%, true);
  }

  .policy-type {
    @include section(1, 18%, false);
  }

  .policy-info {
    @include section(1, 32%, false);
  }

  .policy-info > strong {
    padding-bottom: ru(.25);
  }

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

  .policy-info-label {
    padding-right: ru(.5);
    margin-bottom: ru(.5);
  }

  .actions {
    @include section(1, 25%, true);
    text-align: center;
  }

  .policy-name {
    margin: rem-calc(3px) 0;
    line-height: ru(1);
    display: block;
  }
}

@media #{$large-up} {
  .info-divider {
    display: block;
  }
}