@import "../common/typography/text.mixins";

:host-context(novo-radio-group) {
  margin: 0;
  novo-button {
    pointer-events: none;
    border-radius: 0 !important;
    &.unchecked {
      opacity: 0.6;
    }
    &[theme="icon"] {
      margin-right: 0;
      border: 1px solid $positive;
    }
  }
  &:first-child {
    novo-button {
      border-top-left-radius: 3px !important;
      border-bottom-left-radius: 3px !important;
      &[theme="icon"] {
        border-right-width: 0px !important;
      }
    }
  }
  &:last-child {
    novo-button {
      border-top-right-radius: 3px !important;
      border-bottom-right-radius: 3px !important;
      border-right-width: 1px !important;
      border-right-style: solid !important;
      &[theme="icon"] {
        border-left-width: 0px !important;
      }
    }
  }
}

:host-context(novo-radio-group.novo-radio-group-appearance-horizontal) {
  :host:not(:last-child) {
    .novo-radio-button-label {
      margin-right: 1rem;
    }
  }
}

:host {
  margin-right: 10px;
  position: relative;
  &.vertical {
    display: block;
  }
  > input {
    position: absolute;
    z-index: z(below);
    opacity: 0;
    &:focus + label {
      i {
        &.bhi-radio-empty,
        &.bhi-radio-filled {
          color: $positive;
        }
      }
    }
  }
  > label {
    cursor: pointer;
    .novo-radio-button-label {
      @include novo-body-text();
      display: inline;
    }
    ::ng-deep i {
      margin-right: 5px;
      transition: all 200ms ease-in-out;
      &.bhi-checkbox-empty,
      &.bhi-radio-empty {
        color: #d2d2d2;
      }
      &.bhi-checkbox-filled,
      &.bhi-radio-filled {
        color: $positive;
      }
    }
    &.disabled {
      pointer-events: auto;
      cursor: not-allowed;
      opacity: 0.4;
      button[theme].has-icon {
        opacity: 0.4;
      }
    }
  }
  novo-button[theme].has-icon {
    transition: all 100ms ease-in-out;
    color: $positive;
    background: $white;
    opacity: 1;
    &.checked {
      color: $white;
      background: $positive;
    }

    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
      &.checked[color="#{$name}"] {
        color: $white;
        background: $color;
      }
    }
  }
}