@import "../../app/vars.less";

@duration: 0.7s;

.support-button {
  width: 70vh;
  max-width: 70vh;
  height: auto;
  padding: 0;
  background: linear-gradient(90deg, @background-color, white);
}

.support-button--compact {
  .support-button;
  max-width: 50vh;
  min-width: 50vh;
}

.support-button--compact .ant-image,
.support-button .ant-image {
  border-left: 0px solid @primary-color;
  transition: transform @duration, backdrop-filter @duration, border @duration;
  height: 100%;
}

.support-button_active--compact .ant-image,
.support-button_active .ant-image {
  backdrop-filter: blur(2px);
  border-left: 2px solid @error-color;
  transform: translateX(-30vh);
}

.support-button .ant-image-img {
  // image-rendering: pixelated;
  transition: transform @duration, filter @duration;
  filter: invert(34%) sepia(82%) saturate(546%) hue-rotate(165deg)
    brightness(90%) contrast(92%); // use https://codepen.io/sosuke/pen/Pjoqqp to convert from black
  width: 100vh;
  position: relative;
  -webkit-user-drag: none;
}

.support-button--compact .ant-image-img {
  .support-button .ant-image-img;
  width: 100%;
}

.support-button_active .ant-image-img {
  filter: invert(19%) sepia(84%) saturate(2251%) hue-rotate(347deg)
    brightness(83%) contrast(97%);
}