/* Shared paper button base contract. */

.vk-panel-button {
  min-height: var(--vk-panel-button-height);
  padding-left: var(--vk-panel-button-padding-x);
  padding-right: var(--vk-panel-button-padding-x);
  justify-content: center;
  text-align: center;
}

.vk-btn.vk-paper-button {
  --vk-paper-button-lift: var(--vk-paper-lift-normal-y);
  --vk-paper-button-shadow-y: var(--vk-paper-lift-normal-shadow-y);
  --vk-paper-button-shadow-blur: var(--vk-paper-lift-normal-shadow-blur);
  --vk-paper-button-shadow-spread: var(--vk-paper-lift-shadow-spread);
  --vk-paper-button-shadow-alpha: var(--vk-paper-lift-normal-shadow-alpha);
  --vk-paper-button-bg: var(--vk-paper-lift-button-bg);
  --vk-paper-button-border: transparent;

  background-color: var(--vk-paper-button-bg);
  border-color: var(--vk-paper-button-border);
  box-shadow: var(
    --vk-paper-button-shadow,
    0 var(--vk-paper-button-shadow-y) var(--vk-paper-button-shadow-blur) var(--vk-paper-button-shadow-spread)
      rgba(0, 0, 0, var(--vk-paper-button-shadow-alpha))
  );
  color: var(--vk-paper-lift-button-text);
  transform: translateY(calc(-1 * var(--vk-paper-button-lift)));
  transition:
    transform 180ms cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0, 0.2, 1),
    background-color 180ms ease,
    border-color 220ms ease,
    color 150ms ease;
  will-change: transform, box-shadow;
}

.vk-btn.vk-paper-button:hover:not(:disabled) {
  --vk-paper-button-lift: var(--vk-paper-lift-hover-y);
  --vk-paper-button-shadow-y: var(--vk-paper-lift-hover-shadow-y);
  --vk-paper-button-shadow-blur: var(--vk-paper-lift-hover-shadow-blur);
  --vk-paper-button-shadow-spread: var(--vk-paper-lift-shadow-spread);
  --vk-paper-button-shadow-alpha: var(--vk-paper-lift-hover-shadow-alpha);
  --vk-paper-button-bg: var(--vk-paper-lift-button-bg-hover);
  --vk-paper-button-border: transparent;

  background-color: var(--vk-paper-button-bg);
  border-color: var(--vk-paper-button-border);
}

.vk-btn.vk-paper-button:active:not(:disabled) {
  --vk-paper-button-lift: var(--vk-paper-lift-pressed-y);
  --vk-paper-button-shadow-y: 0px;
  --vk-paper-button-shadow-blur: 0px;
  --vk-paper-button-shadow-spread: 0px;
  --vk-paper-button-shadow-alpha: 0;
  --vk-paper-button-shadow: var(--vk-shadow-paper-pressed);
  --vk-paper-button-bg: var(--vk-paper-lift-button-bg-pressed);
  --vk-paper-button-border: transparent;

  background-color: var(--vk-paper-button-bg);
  border-color: var(--vk-paper-button-border);
}

.vk-btn.vk-paper-button,
.vk-btn.vk-paper-button:hover:not(:disabled),
.vk-btn.vk-paper-button:active:not(:disabled) {
  border-color: transparent !important;
}
