@import "../../../themes/core/mat-icon";
@import "button-base";
@import "button-theme";

.qms-btn-text,
.qms-btn-text-lg {
  background: transparent;
}

.qms-btn-fab,
.qms-btn-fab-sm,
.qms-btn-fab-outlined,
.qms-btn-fab-outlined-sm {
  border-radius: $fab-border-radius;
}

.qms-btn,
.qms-btn-lg,
.qms-btn-outlined,
.qms-btn-outlined-lg,
.qms-btn-text,
.qms-btn-text-lg {
  border-radius: $border-radius;
}

.qms-btn,
.qms-btn-lg,
.qms-btn-outlined,
.qms-btn-outlined-lg,
.qms-btn-text,
.qms-btn-text-lg,
.qms-btn-fab,
.qms-btn-fab-sm,
.qms-btn-fab-ext,
.qms-btn-fab-outlined,
.qms-btn-fab-outlined-sm,
.qms-btn-fab-outlined-ext {
  @include base;
  @include typo;
}

.qms-btn-outlined,
.qms-btn-outlined-lg,
.qms-btn-fab-outlined,
.qms-btn-fab-outlined-sm,
.qms-btn-fab-outlined-ext {
  border: $stroked-button-border-width solid #ddd;

  &.qms-btn-disabled {
    border: $stroked-button-border-width solid black(0.12);
  }
}

.qms-btn,
.qms-btn-lg,
.qms-btn-outlined,
.qms-btn-outlined-lg,
.qms-btn-text,
.qms-btn-text-lg,
.qms-btn-fab,
.qms-btn-fab-sm,
.qms-btn-fab-ext,
.qms-btn-fab-outlined,
.qms-btn-fab-outlined-sm,
.qms-btn-fab-outlined-ext {
  &:not([disabled]):hover {
    // color: inherit;
    text-decoration: none;
  }

  .qms-btn-wrapper > * {
    vertical-align: middle;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
  }

  &:not([disabled]):focus {
		// &:not(:active) {
		// 	&::after {
		// 		animation: ripple 1s ease-out;
		// 	}
		// }

    &:not(:focus-visible) {
      &:not(:active) {
        &::after {
          animation: ripple 1s ease-out;
        }
      }
    }
	}

}


@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
