@import "da-button-mixins";

.da-btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  display: block;
  border-radius: 3px;
  font-size: 10px;
  @include user-select(none);

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: none;
      @include tab-focus;
    }
  }

  &:hover,
  &:focus,
  &.focus {
    outline: none;
    text-decoration: none;
  }

  &:active,
  &.active {
    outline: none;
    background-image: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    pointer-events: none;
    @include opacity(0.60);
  }

  &.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .btn-content {
  	div {
  		display: inline-block;
  	}
  	.truncate {
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}
		.btn-icon-left {
			float: left;
		}
		.btn-text {
			width: 100%;
      float: left;
      &.center {
        text-align: center;
      }
		}

		.btn-icon-right {
			float: right;

			.chevron {
				padding: 0px 0px;

				svg {
					width: 100%;
					height: 100%;
					max-height: 10px;
				}
			}
		}

  }

  .hidden {
  	display: none !important;
  }
}


// Alternate themes
// --------------------------------------------------

.thm-clear {
  @include button-variant(#54585A, transparent, #54585A);
}

.thm-light-grey {
  @include button-variant(#54585A, #D8D8D9, #54585A);
}

.thm-light-grey-invert {
  @include button-variant(#54585A, #D8D8D9, #54585A, 1);
}

.thm-none {
  @include button-variant(#54585A, #FFFFFF, #54585A);
}

.thm-dark-grey {
  @include button-variant(#FFFFFF, #7B8184, #FFFFFF);
}

.thm-orange {
  @include button-variant(#FFFFFF, #FC9927, #FFFFFF);
}

.thm-orange-invert {
  @include button-variant(#FC9927, #FC9927, #FFFFFF, 1);
}

.thm-red {
  @include button-variant(#FFFFFF, #E4584F, #FFFFFF);
}

.thm-red-invert {
  @include button-variant(#E4584F, #E4584F, #FFFFFF, 1);
}

.thm-green {
  @include button-variant(#FFFFFF, #80C25D, #FFFFFF);
}

.thm-green-invert {
  @include button-variant(#80C25D, #80C25D, #FFFFFF, 1);
}

// Button Sizes
// --------------------------------------------------

.sz-lg {
  // line-height: ensure even-numbered height of button next to large input
  font-size: 14px;
  .btn-content {
    padding: 13px 0px 13px 10px;
    display: inline-block;
    width: 94%
  }
      .chevron {
      width: 14px;
    }
}
.sz-md {
  font-size: 12px;
  .btn-content {
    padding: 10px 0px 10px 10px;
    display: inline-block;
    width: 94%
  }
      .chevron {
      width: 12px;
    }
}
.sz-sm {
  // line-height: ensure proper height of button next to small input
  font-size: 10px;
  .btn-content {
    padding: 7px 0px 7px 10px;
    display: inline-block;
    width: 94%;

    .chevron {
      width: 10px;
    }
  }
}






/*.btn-clear {
  $fontColor: #54585A;
  $iconColor: #54585A;
  $borderColor: transparent;
  $backgroundColor: transparent;
  $hoverBorderColor: transparent;
  $hoverBackgroundColor: transparent;
  $activeFontColor: #54585A;
  $activeBorderColor: #CECECF;
  $activeBackgroundColor: #CECECF;
}*/



/*.btn-light-grey-invert {
$fontColor: #54585A;
$iconColor: #54585A;
$borderColor: #D8D8D9;
$backgroundColor: #FFFFFF;
$hoverBorderColor: #D8D8D9;
$hoverBackgroundColor: #F4F4F5;
$activeFontColor: #54585A;
$activeBorderColor: #CECECF;
$activeBackgroundColor: #CECECF;
}*/
/*.btn-none {
$fontColor: #54585A;
$iconColor: #54585A;
$borderColor: #FFFFFF;
$backgroundColor: #FFFFFF;
$hoverBorderColor: #D8D8D9;
$hoverBackgroundColor: #F4F4F5;
$activeFontColor: #54585A;
$activeBorderColor: #CECECF;
$activeBackgroundColor: #CECECF;
}*/