@import 'cdb-variables/colors';

.VerticalRadioList-item {
  display: flex;
  position: relative;
  margin-bottom: 1rem;

  &::after {
    position: absolute;
    bottom: -18px;
    left: 7px;
    width: 1px;
    height: 18px;
    background: #DDD;
    content: '';
  }

  &:first-child {
    margin-top: 16px;

    &::before {
      position: absolute;
      top: -16px;
      left: 7px;
      width: 1px;
      height: 17px;
      background: #DDD;
      content: '';
    }
  }

  &:last-child::after {
    content: none;
  }
}

.VerticalRadioList-itemInner {
  display: flex;

  &:hover {
    cursor: pointer;

    .CDB-Radio + .CDB-Radio-face {
      border: 1px solid $cBlueHover;

      &::before {
        background: $cHoverLine;
      }
    }

    .CDB-Radio:checked:hover + .CDB-Radio-face {
      border: 1px solid $cBlue;

      &::before {
        background: $cWhite;
      }
    }
  }

  &.has-error {
    .CDB-Text {
      // !important because we're using the style attribute in the
      // element for the layer color, we need to override it somehow
      color: $cError !important;
    }
  }
}

@import 'cdb-variables/colors';

.VerticalRadioList-item {
  display: flex;
  position: relative;
  margin-bottom: 1rem;

  &::after {
    position: absolute;
    bottom: -18px;
    left: 7px;
    width: 1px;
    height: 18px;
    background: #DDD;
    content: '';
  }

  &:first-child {
    margin-top: 16px;

    &::before {
      position: absolute;
      top: -16px;
      left: 7px;
      width: 1px;
      height: 17px;
      background: #DDD;
      content: '';
    }
  }

  &:last-child::after {
    content: none;
  }
}

.VerticalRadioList-itemInner {
  display: flex;

  &:hover {
    cursor: pointer;

    .CDB-Radio + .CDB-Radio-face {
      border: 1px solid $cBlueHover;

      &::before {
        background: $cHoverLine;
      }
    }

    .CDB-Radio:checked + .CDB-Radio-face {
      border: 1px solid $cBlue;

      &::before {
        background: $cWhite;
      }
    }
  }

  &.has-error {
    .CDB-Text {
      // !important because we're using the style attribute in the
      // element for the layer color, we need to override it somehow
      color: $cError !important;
    }
  }
}

Fix radio hover state in radio-list
Fix radio hover state in radio-list
