/* -------------------------------------------------
   List radio buttons
   ------------------------------------------------- */

.section-radios {
  display: flex;
  justify-content: space-between;

  > div {
    &:first-child {
      flex: 0 0 15%;
    }

    &:nth-child(2) {
      flex: 1 1 auto; // magic
      background: $blue_bg;
      border-radius: 15px;
    }
  }
}


.radio-buttons {
  input[type=radio] {
    display: none;

    + label {
      border-radius: 15px 0 0 15px;
      line-height: 30px;
      margin-right: 15px;

      &:before {
        display: inline-block;
        color: #999;
        text-align: center;
        // 30px wide would make it square and provide enough space before the test,
        // but we get 4px from new line in html,
        // so 20 wide + 5 left margin + 1 right margin + 4 new line = 30px
        font-size: 17px;
        margin-left: 5px;
        margin-right: 1px;
        width: 20px;

        /* unchecked icon */
        content: "";
        -webkit-mask: url('../img/circle-regular.svg') center center no-repeat;
        mask: url('../img/circle-regular.svg') center center no-repeat;
      }

      &:hover:before {
        color: #FF8900;
      }
    }

    &:checked + label {
      &:before {
        /* checked icon */
        content: "\f192";
        color: $blue;
      }

      &:hover:before {
        color: $orange;
      }
    }

    &.error + label,
    &.error + label:before {
      color: red;
    }

    &:disabled + label {
      color: #AAA;

      &:before {
        color: #CCC;
      }

      &:hover {
        background: transparent;
      }
    }

    &:checked:disabled + label:hover {
      background: #EAF7FB;
    }
  }
}

ul.radio-list {
  margin: 15px 0;

  li {
    margin: 0;

    &.current-selection {
      label {
        background: $blue_bg;
      }
    }

    label {
      width: 100%;
      white-space: nowrap;
    }
  }
}

.radio-description {
  padding: 0 15px;

  p {
    margin: 15px 0 15px !important;
  }
}

.options {
  margin: 0 10px 15px 0;

  // inner div required
  > div {
    display: inline-block;

    > div {
	  display: inline-block;
	  width: 25%;
    }
  }
}

// Add margin to match <p>. Must be after `.options` rules.
.description-inner {
  margin: 15px 0;
}