// Fix normally HTML button
button:not(.btn),
.button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  padding: 20px 40px;
  color: $button-font-color;
  background-color: $primary-color;
  &:hover, 
  &:focus {
    background-color: $accent_color;
    border-color: $accent_color;
    color: $white;
  }
}
/* CMS Button */
.btn,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  position: relative;
  display: inline-block;
  font-family: $button-font-family;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  line-height: 1;
  letter-spacing: $button-letter-spacing;
  outline: none;
  cursor: pointer;
  text-transform: capitalize;
  vertical-align: top;
  border: none;
  @include box-shadow(none);
  @include border-radius($button-radius);
  @include transition();
  overflow: hidden;
  &:hover, 
  &:focus {
    outline: none;
  }
  [dir="rtl"] &{
    @include border-radius($button-radius-rtl);
  }
  // Alignment
  &.text-justify{
    display: block;
  }
}
// button content
.cms-btn-content{
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
  align-items: center;
  > span{
    flex: 0 0 auto;
    position: relative;
    //white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    &.cms-align-icon-right{
      order: 2;
    }
  }
  &.justify-content-between{
    > .cms-btn-text{
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
      text-align: start;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
//button icon 
.cms-btn-icon{
  font-size: 10px;
  display: flex;
  align-items:center;
  &.icon-outline-yes:before{
    @include box-shadow( 0 0 0 2px #b2bdd6 inset);
    @include border-radius(50%);
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
  }
  &.text-26,
  &.cmsi-arrow-circle-right{
    font-size: 26px;
  }
  &.text-36{
    font-size: 36px;
  }
}
//button alignment
.text-start > .cms-btn-content{
  justify-content: flex-start;
}
.text-end > .cms-btn-content{
  justify-content: flex-end;
}
.text-justify > .cms-btn-content{
  justify-content: space-between;
}
.cms-loading-icon,
.cms-added-icon{
  display: none;
}
.loading{
  .cms-loading-icon{
    display: inline-block;
  }
  .cms-default-icon,
  .cms-added-icon{
    display: none;
  }
}
.added{
  .cms-added-icon{
    display: inline-block;
  }
  .cms-default-icon,
  .cms-loading-icon{
    display: none;
  }
}
// Button Color
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  background-color: $primary-color;
  color: $white;
  &:hover{
    background-color: $accent_color;
  }
}
.btn-white{
  color: $primary-color;
}
// Button Fill
.btn-fill{
  // Button Color
  @each $name, $color in $cms_theme_colors{
    &.btn-#{$name} {
      background-color: #{$color};
    }
    &.btn-hover-#{$name}{
      &:hover,
      &:focus{
        background-color: #{$color};
      }
    }
  }
}
// outline
.btn-outline{
  @include box-shadow(0 0 0 2px $button-border-color inset);
  @each $name, $color in $cms_theme_colors{
    &.btn-#{$name} {
      @include box-shadow(0 0 0 2px $color inset);
    }
    &.btn-hover-#{$name}:hover{
      @include box-shadow(0 0 0 2px $color inset);
    }
  }
}
.btn-hover-outline:hover{
  @each $name, $color in $cms_theme_colors{
    &.btn-hover-#{$name}{
      @include box-shadow(0 0 0 2px $color inset);
      background-color: transparent;
    }
  }
}
.btn-hover-fill:hover{
  @each $name, $color in $cms_theme_colors{
    &.btn-hover-#{$name}{
      @include box-shadow(0 0 0 2px $color inset);
      background-color: $color;
    }
  }
}

// Button Size Spacing
// button size: 48, 51, 58,  68, 78
$cms_theme_btn_spacing : (
  '' : 16.5px 20px, //48
  '-xs' : 10px, // 31
  '-sm' : 13px 20px, //41
  '-smd' : 18px 30px, //51
  '-md' :  22px 30px, //58
  '-mdl' : 23px 40px, //61
  '-lg' : 26px 40px, // 67
  '-xl' : 28px 40px, // 72 - has icon circle
  '-xxl' : 31.5px 40px // 78 - no icon circle
);
@each $name, $spacing in $cms_theme_btn_spacing{
  &.btn#{$name} {
    padding: $spacing;
  }
}

// Button Font Size
//button size: 48, 51, 58, 68, 78
$cms_theme_btn_font_sizes : (
  '' : $button-font-size, //51
  '-xs' : 12px, // 32
  '-sm' : 13px, //40
);
@each $name, $size in $cms_theme_btn_font_sizes{
  .btn#{$name} {
    font-size: $size;
  }
}
// Video 
.btn-video{
  width: 105px;
  height: 105px;
  line-height: 73px;
  font-size: 33px;
  position: relative;
  color: $primary_color;
  display: block;
  text-align: center;
  border: 16px solid rgba($white, 0.5);
  @include border-radius(50%);
  &:before,
  &:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65px;
    width: 65px;
    @include transform(translate(-50%,-50%));
    @include border-radius(50%);
    @include box-shadow(0 0 0 0 rgba(255, 255, 255, .3));
    @include animation(ripple 3s infinite);
  }
  &:before {
    @include css3-prefix('animation-delay', .9s);
  }
  &:after {
    @include css3-prefix('animation-delay', .6s);
  }
  .cms-play-video-icon{
    width: 73px;
    height: 73px;
    line-height: 73px;
    display: block;
    background: $white;
    @include border-radius(50%);
    &:before{
      @include font-cmsi('\f3aa');
    }
  }
}
.cms-video-btn.layout-ripple{
  width: 68px;
  height: 68px;
  display: block;
  line-height: 68px;
  text-align: center;
  @include border-radius(50%);
  @include transition();
  // color
  @each $name, $color in $cms_theme_colors {
    &.bg-#{$name}{
      //@include box-shadow(0 0 0 15px #{'rgba(--color-'}$color#{'-rgb , 0.2)'});
      //background-color: #{'rgba(var(--color-accent-rgb), 0.9)'};
    }
    &.bg-hover-#{$name}:hover{
      //@include box-shadow(0 0 0 15px rgba( $color , 0.2));
    }
  }
  > span{
    display: inline-block;
    transform: translateY(2px);
  }
  &.size-54x36{
    width: 54px;
    height: 36px;
    line-height: 36px;
    @include border-radius(0);
  }
}
.cms-video-btn.layout-btn{
  padding: 15px 30px;
  display: flex;
  align-items:center;
  @include transition();
  &.size-22{
    padding: 10px;
  }
  &.size-42{
    padding: 13.5px 20px;
  }
  &.size-46{
    padding: 15px 20px;
  }
  &.size-47{
    padding: 16px 20px;
  }
  &.size-62{
    padding: 25px 30px;
  }
  &.size-68{
    padding: 26.5px 30px;
  }
  &.size-78{
    padding: 32px 30px;
  }
  &.size-82{
    padding: 35px;
  }
  &.size-88{
    padding: 37px;
  }
  &.size-90{
    padding: 38px;
  }
}
.btn-content-between .cms-btn-content{
  justify-content: space-between;
}
.btn-content-center .cms-btn-content{
  justify-content: center;
}