@import './colors.less';
@import './variables.less';

.circular-button(@color,@bgColor, @size, @radius, @fontSize){
  color: @color;
  border: @radius solid @color;
  border-radius : 50%;
  height: @size;
  width: @size;
  background: @bgColor;
  margin: 40px;
  font-size: @fontSize;
  font-weight: 800;
  pointer : default;
  &:hover{
    background: @bgColor;
    border: @radius solid @color;
    color: @color;
    transition: box-shadow 0.5s;
  }
  &:focus{
    background: @bgColor !important;
    border: @radius solid @color;
    color: @color !important;
    outline: none !important;
    transition: box-shadow 0.5s;
  }
  &:active{
    background: @bgColor !important;
    border: @radius solid @color;
    color: @color !important;
    outline: none !important;
    transition: box-shadow 0.5s;
  }
}

.custom-button(@width, @height, @border, @color){
  width: @width;
  height: @height;
  border: @border;
  background: @btn-background;
  color: @color;
  border-radius: 2px;
  font-size: @font-size-sm;
  font-weight: @font-weight-sm;
  cursor : default;
  &:hover{
    background: @btn-background;
    border: 3px solid @color !important;
    color: @color;
  }
  &:focus{
    color: @color !important;
    outline: none !important;
  }
  &:active{
    color: @color !important;
    outline: none !important;
    box-shadow: none !important;
  }
}


.vertical-divider(@height, @color){
  &:after {
    background: @color;
    width: 1px;
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    height:@height;
  }
}

.lock-overlay(@color, @fontSize, @top){
  position: absolute;
  background: lighten(@base-color, 80%);
  opacity: 0.8;
  .icon-container{
    background: #fff;
    opacity: 1;
    margin: auto;
    top: @top;
    position: relative;
    text-align: center;
    i{
      position: relative;
      opacity: 1;
      color: @color;
      font-size: @fontSize;
      font-weight:1000;
    }
  }
}

