@import "./mixins/_button";

@mixin circle($width,$color){
  width: $width;
  height: $width;
  border-radius: 50%;
  background-color: $color;
}

.el-radio{
  color:$radio-color;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  & + .el-radio{
    margin-left: 30px;
  }

}

.el-radio-input{
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
}

.el-radio-inner{
  border:$radio-input-border;
  @include circle($radio-input-width,$radio-input-fill);

  position: relative;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;

  &:not(.is-disabled):hover{
    border-color:$radio-input-border-color-hover;
  }

  &::after{
    @include circle(6px,$radio-input-fill);
    content:'';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%) scale(0);
    transition: transform .15s cubic-bezier(0.71,-0.46,0.88,0.6);
  }

  &.is-disabled{
    background-color: $radio-disabled-input-fill;
    border-color:$radio-disabled-input-border-color;
    cursor: not-allowed;

    &::after{
      cursor: not-allowed;
      background-color: $radio-disabled-icon-color;
    }

    & + .el-radio-label{
      cursor: not-allowed;
    }
  }

  &.is-checked{
    border-color:$radio-checked-input-border-color;
    background: $radio-checked-icon-color;

    &::after{
      transform: translate(-50%,-50%) scale(1);
    }
  }

  &.is-focus{
    border-color:$radio-input-border-color-hover;
  }

  &.is-disabled.is-checked{
    background-color: $radio-disabled-checked-input-fill;
    border-color:$radio-disabled-checked-input-border-color;

    &::after{
      background-color: $radio-disabled-checked-icon-color;
    }
  }
}

.el-radio-original{
  opacity: 0;
  outline: none;
  position: absolute;
  z-index: -1;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.el-radio-label{
  font-size: $radio-font-size;
  padding-left: 5px;
}

.el-radio-group{
  display: inline-block;
  font-size: 0;

  & .el-radio{
    font-size: $radio-font-size;
  }
}

.el-radio-button{
  position: relative;
  overflow: hidden;
  display: inline-block;

  &:not(:last-child){
    margin-right: -1px;
  }

  &:first-child{
    .el-radio-button-inner{
      border-radius: $border-radius-base 0 0 $border-radius-base;
    }
  }

  &:last-child{
    .el-radio-button-inner{
      border-radius: 0 $border-radius-base $border-radius-base 0;
    }
  }
}

.el-radio-button-inner{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background: $button-default-fill;
  border:$border-base;
  color:$button-default-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: $border-transition-base, $color-transition-base;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  @include button-size($button-padding-vertical,$button-padding-horizontal,$button-font-size,0);

  &:hover{
    color:$color-primary;
  }

  & .el-icon-right{
    margin-left: 5px;
  }

  & .el-icon-left{
    margin-right: 5px;
  }

  & [class*='el-icon-']{
    line-height: 0.9;

    & + span{
      margin-left: 5px;
    }
  }

}

.el-radio-button-orig-radio{
  opacity: 0;
  outline: none;
  position: absolute;
  z-index: -1;
  left: -999px;

  &:checked{
    & + .el-radio-button-inner{
      z-index: 1;
      color:$color-primary;
      border-color: $color-primary;
    }
  }

  &:disabled{
    & + .el-radio-button-inner{
      z-index: -1;
      color:$button-disabled-color;
      cursor:not-allowed;
      background-image: none;
      background-color: $button-disabled-fill;
      border-color:$button-disabled-border;
    }
  }
}

.el-radio-button-large{
  & .el-radio-button-inner{
    @include button-size($button-large-padding-vertical,$button-large-padding-horizontal,$button-large-font-size,0)
  }
}

.el-radio-button-small{
  & .el-radio-button-inner{
    @include button-size($button-small-padding-vertical,$button-small-padding-horizontal,$button-small-font-size,0)
  }
}

.el-radio-button-mini{
  & .el-radio-button-inner{
    @include button-size($button-mini-padding-vertical,$button-mini-padding-horizontal,$button-mini-font-size,0)
  }
}