/*
 * Buttons
 */
@import "pm-buttons-mixins";

[class*="pm-button"],
[class*="pv-button"] {
  border-radius: $global-border-radius;
  padding: em(5) em(16) em(6); // design want 34px height
  border-style: solid;
  border-width: 1px;
  text-decoration: none;
  transition: .15s easing(easeOutQuint), background-position 0s;
  & > button { // this is for drop down buttons
    color: inherit;
  }
  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    text-decoration: none;
  }
}

.pm-button {
  border-color: $pm-global-border;
  background-color: $white;
  color: $pm-global-grey;


  &:hover,
  &:focus,
  &:focus-within,
  &.is-hover {
    color: $pm-global-grey;
    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
  }
  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
  &.is-active {
    //background-color: $pm-global-border;
    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
    box-shadow: none;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state;
  }
  /* just to cancel examples  */
  &.is-active:hover {
    box-shadow: none;
  }
  &.is-hover:hover {
    background-color: $white;
  }

  &.p0 {
    padding: 0;
  }

  &[aria-expanded="true"] .caret-like {
	@extend .rotateX-180;
  }

  &.pm-select {
	  padding-right: .6rem;
	  .mauto {
		  display: flex;
		  width: 100%;
	  }
	  .mr0-5 {
		  flex: 1 1 0px;
		  @extend .ellipsis;
	  }
  }
}


.pm-button-dark {
  @include pm-button-dark;
}


.pm-button-blue,
.pm-button.pm-button-blue {
  color: $white;
  background-color: $pm-primary;
  border: 1px solid $pm-primary;

  &:focus,
  &:hover,
  &:focus-within,
  &.is-hover {
    color: $white;
    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
    background-color: $pm-primary-dark;
  }
  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
  &.is-active {
    background-color: $pm-primary-dark;
    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
    box-shadow: none;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state($pm-primary);
  }
  /* just to cancel examples  */
  &.is-hover:hover {
    background-color: $pm-primary-dark;
  }
}

.pm-button-blueborder {
  border-color: $pm-primary;
  color: $pm-primary;
  background-color: $white;

  &:focus,
  &:hover,
  &:focus-within,
  &.is-hover {
    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
    border-color: $pm-primary-dark;
    color: $pm-primary-dark;
  }
  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
  &.is-active {
    border-color: $pm-primary-dark;
    color: $pm-primary-dark;
    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
    box-shadow: none;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state;
  }
}


.pm-button-blueborder-dark {
  @include pm-button-blueborder-dark;
}

.pv-button-green,
.pm-button.pv-button-green {
  color: $white;
  background-color: $pv-green;
  border: 1px solid $pv-green;

  &:focus,
  &:hover,
  &:focus-within,
  &.is-hover {
    color: $white;
    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
    background-color: $pv-green-dark;
  }
  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
  &.is-active {
    background-color: $pv-green-dark;
    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
    box-shadow: none;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state($pv-green);
  }
  /* just to cancel examples  */
  &.is-hover:hover {
    background-color: $pv-green-dark;
  }
}

.pv-button-greenborder {
  border-color: $pv-green;
  color: $pv-green;
  background-color: $white;

  &:focus,
  &:hover,
  &:focus-within,
  &.is-hover {
    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
    border-color: $pv-green-dark;
    color: $pv-green-dark;
  }
  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
  &.is-active {
    border-color: $pv-green-dark;
    color: $pv-green-dark;
    background-image: radial-gradient(closest-side, transparent, rgba(black, .1));
    box-shadow: none;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state;
  }
}


.pv-button-greenborder-dark {
  @include pv-button-greenborder-dark;
}



/* modifiers */
.pm-button--large {
  padding: em(10) em(20) em(9); // design want 42px height
}
.pm-button--small {
  padding: em(1) em(12) em(2); // design want 26px height
}

.pm-button--for-icon {
  padding-left: .75em;
  padding-right: .75em;
}
.pm-button--for-smallicon {
  padding-left: .25em;
  padding-right: .25em;
}

/* button group */
.pm-group-buttons {
  @extend .inline-flex;
  @extend .flex-nowrap;
}
.pm-group-button,
.pm-group-button.is-active,
.pm-group-button:hover,
.pm-group-button:focus,
.pm-group-button:active {
  border-radius: 0;
  border-left-width: 0;
}
.pm-group-button:hover,
.pm-group-button:focus,
.pm-group-button:active {
  position: relative;
}

.pm-group-buttons > .pm-group-button:first-child {
  border-radius: $global-border-radius 0 0 $global-border-radius;
  border-left-width: 1px;
}
.pm-group-buttons > .pm-group-button:last-child {
  border-radius: 0 $global-border-radius $global-border-radius 0;
}

@if $rtl-option == true {
  [dir="rtl"] {
    .pm-group-buttons > .pm-group-button:not(.pagination-expand):first-child {
      border-radius: 0 $global-border-radius $global-border-radius 0;
      border-right-width: 1px;
      border-left-width: 0;
    }
    .pm-group-buttons > .pm-group-button:not(.pagination-expand):last-child {
      border-radius: $global-border-radius 0 0 $global-border-radius;
      border-left-width: 1px;
    }
  }
}

/* special case for group button with primary colors */
.pm-group-buttons > .pm-group-button.pm-button--primary {
	border-color: $pm-primary;
	border-left-width: 0;
	&:first-child {
		border-left-width: 1px;
	}
	&:not(:last-child) {
		border-right-color: var(--bgcolor-main-area, $white);
	}
}

/* exception for group buttons, disabled state should keep the border */
.pm-group-button {
  &[disabled],
  &.is-disabled {
    &.pm-button {
      border-color: $pm-global-border;
    }
    &.pm-button-blueborder {
      border-color: $pm-primary;
    }
    &.pv-button-greenborder {
      border-color: $pv-green;
    }
  }
}


/* aliases for buttons => different per project */
/* primary/link/error/warning/info */
@if ($pm-primary == $pm-blue) {
  .pm-button--primary {
    @extend .pm-button-blue;
  }
  .pm-button--primaryborder,
  .pm-button--primaryborderEvenInDarkMode {
    @extend .pm-button-blueborder;
  }
  .pm-button--primaryborder-dark {
    @extend .pm-button-blueborder-dark;
  }
}
@else {
  .pm-button--primary {
    @extend .pv-button-green;
  }
  .pm-button--primaryborder,
  .pm-button--primaryborderEvenInDarkMode {
    @extend .pv-button-greenborder;
  }
  .pm-button--primaryborder-dark {
    @extend .pv-button-greenborder-dark;
  }
}
.pm-button--link,
.pm-button.pm-button--link {
  color: $color-links;
  border-width: 0;
  box-shadow: none;
  text-decoration: underline;
  background-color: transparent; // to avoid heriting from other classes
  padding-left: 0;
  padding-right: 0;
  &:focus,
  &:hover,
  &:not(div):active,
  &:active {
    color: $color-hover;
    text-decoration: underline;
    box-shadow: none;
    background: transparent; // to avoid heriting from other classes
  }
  &[disabled],
  &.is-disabled {
    color:  rgba( $pm-global-grey, .5 );
    pointer-events: none;
    text-decoration: none;
    background-color: transparent; // to avoid heriting from other classes
  }
  &.nodecoration {
	  text-decoration: none;
  }
  &.pm-button--currentColor {
	  color: currentColor;
  }
}
.pm-button--error,
.pm-button.pm-button--error {
  @extend .pm-button-blue;
  background-color: $pm-global-warning;
  border-color: $pm-global-warning;
  &:focus,
  &:hover,
  &:not(div):active { // not div is here for a specificity issue for another fix
    background-color: $pm-global-warning;
    border-color: $pm-global-warning;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state($pm-global-warning);
  }
}
.pm-button--warning,
.pm-button.pm-button--warning {
  @extend .pm-button-blue;
  background-color: $pm-global-attention;
  border-color: $pm-global-attention;
  &:focus,
  &:hover,
  &:not(div):active { // not div is here for a specificity issue for another fix
    background-color: $pm-global-attention;
    border-color: $pm-global-attention;
  }
  &[disabled],
  &.is-disabled {
    @include button-disabled-state($pm-global-attention);
  }
}
.pm-button--info {
  @extend .pm-button;
}

/* other aliases requested */
.pm-button--redborder,
.pm-button.pm-button--redborder {
	@extend .pm-button;
	border-color: $pm-global-warning;
	color: $pm-global-warning;
  	&:focus,
	&:hover,
	&:not(div):active,
	&:active {
		color: $pm-global-warning;
	}
}
.pm-button--whiteborder,
.pm-button--primary.pm-button.pm-button--whiteborder {
  border: 1px solid $white;
}

/* other modifiers requested */
.pm-button--noborder {
  border: 0;
}
.pm-button--currentColor {
  color: currentColor;
}
.pm-button--pill {
  border-radius: 2em;
}
.pm-button--transparent {
  /* When using currentColor, you need to set the color you want on a container */
  border: 1px solid currentColor;
  color: currentColor;
  &:focus,
  &:hover,
  &:not(div):active,
  &:active {
    background-color: rgba(black, .2);
    color: currentColor;
  }
}