/* #Buttons
================================================== */

/*vars*/
@dt-btn-bg-color-darken: darken(@dt-btn-hover-bg-color, 5%);
@dt-btn-bg-color-2-darken: darken(@dt-btn-hover-bg-color-2, 5%);
.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
  background: @customColor !important;
}

.custom-mixin-color (@customColor) when (iscolor(@customColor)) {
  color: @customColor;
}

.custom-mixin-border-color (@customColor) when (iscolor(@customColor)) {
  border-bottom-color: desaturate(darken(@customColor, 12%), 20%);
}

.icon-gap (@a) when (@a >= 15px) {
  margin-right: @a*8/14;
}

.icon-gap-left (@a) when (@a >= 15px) {
  margin-left: @a*8/14;
}

.custom-mixin-custom-button-size() when (ispixel(@default-btn-border-radius)) {
  border-radius: @default-btn-border-radius;
  padding: @default-btn-padding-top @default-btn-padding-right @default-btn-padding-bottom @default-btn-padding-left;
  font-size: @default-btn-font-size;

  &.ico-right-side > i {
    margin-right: 0px;
    margin-left: 8px;
    .icon-gap-left (@a)
  }

  & > i {
    margin-right: 8px;
    .icon-gap (@a)
  }
}

#@{unique-shortcode-class-name}:not(:hover) {
  .custom-mixin-bg (@default-btn-bg);
  .custom-mixin-color (@default-btn-color);

  & * {
    .custom-mixin-color (@default-btn-color);
  }

  .btn-3d & {
    .custom-mixin-border-color (@default-btn-bg);
  }
}

#@{unique-shortcode-class-name} {
  .custom-mixin-custom-button-size();

  &:hover {
    .custom-mixin-bg (@default-btn-bg-hover);
    .custom-mixin-color (@default-btn-color-hover);


    & * {
      .custom-mixin-color (@default-btn-color-hover);
    }
  }

  &:hover {
    .btn-3d & {
      .custom-mixin-border-color (@default-btn-bg-hover);
    }
  }

  & > i {
    font-size: @default-btn-icon-size;
  }

  & * {
    vertical-align: middle;
  }
}

