@import 'common/sass/variables';
@import 'common/sass/mixins';

$radio-size: 10px;

.NodeOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-xs-bump;

  &-name {
    flex: 1;
    padding: 0.2rem 0;
    cursor: pointer;
    @include ellipsis;

    &:before {
      content: '';
      display: inline-block;
      border: 1px solid shade-dark(0.15);
      border-radius: 100%;
      height: $radio-size;
      width: $radio-size;
      margin-right: $space-xs;
      background: color(control-bg);
      box-shadow: 0 0 0 1px color(control-bg) inset;
    }

    &:hover {
      &:before {
        border-color: shade-dark(0.3);
      }
    }

    &.is-selected {
      &:before {
        border-color: color(brand-primary);
        background: color(brand-primary);
      }
    }

    &.is-auto-selected {
      &:before {
        background: color(brand-primary);
        opacity: 0.3;

        &:hover {
          opacity: 0.8;
        }
      }

      &:hover:before {
        opacity: 0.8;
      }
    }
  }

  &-remove {
    @include reset-button;
    opacity: 0.25;
    font-size: 14px;

    &:hover {
      color: color(brand-danger);
      opacity: 0.8;
    }
  }
}