.Tappable:not([disabled]) {
  cursor: pointer;
}

/**
 * iOS tappable
 */
.Tappable--ios {
  position: relative;
  border-radius: 10px;
  transition: background-color .15s ease-out;
}

/** TODO: Переписать без использования !important */
.Tappable--ios.Tappable--active:not([disabled]):not(.TabsItem):not(.PanelHeaderButton):not(.IconButton):not(.Button):not(.Link):not(.SliderSwitch__button):not(.PanelHeaderContent__in):not(.ActionSheetItem):not(.Banner__in):not(.ModalDismissButton):not(.SubnavigationButton) {
  background: var(--background_highlighted) !important;
  transition: none;
}

/**
 * Android tappable
 */
.Tappable--android {
  position: relative;
  transition: background-color .15s ease-out;
  border-radius: 8px;
}

.Tappable--android.Tappable--active:not([disabled]):not(.TabsItem):not(.PanelHeaderButton):not(.IconButton):not(.Button):not(.Link):not(.SliderSwitch__button):not(.PanelHeaderContent__in):not(.ModalDismissButton):not(.SubnavigationButton) {
  background: var(--background_highlighted) !important;
}

/**
 * VKCOM tappable
 */
.Tappable--vkcom {
  position: relative;
  transition: background-color .15s ease-out;
  border-radius: 8px;
}

.Tappable--vkcom.Tappable--active:not([disabled]):not(.TabsItem):not(.PanelHeaderButton):not(.IconButton):not(.Button):not(.Link):not(.SliderSwitch__button):not(.PanelHeaderContent__in):not(.ModalDismissButton):not(.SubnavigationButton) {
  background: var(--background_highlighted) !important;
}

/**
 * Waves container
 */
.Tappable--android .Tappable__waves {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  /* Fix for Safari: css animation + border-radius + overflow ignores parent border-radius */
  will-change: transform;
}

/**
 * Wave
 */
.Tappable--android .Tappable__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0;
  content: '';
  border-radius: 50%;
  background: rgba(127, 127, 127, .1);
  animation: animation-wave .3s var(--android-easing);
}

.Tappable__hoverShadow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.Tappable:not(.SliderSwitch__button):not(.ModalDismissButton):not(.Link):not(.PanelHeaderButton--vkcom).Tappable--shadowHovered > .Tappable__hoverShadow {
  background: var(--background_hover);
}

.Tappable--opacityHovered {
  opacity: .8;
}

.Tappable--sizeX-compact {
  border-radius: 0;
}

.Tappable--mouse {
  transition: opacity .15s ease-out;
}

.Tappable--mouse .Tappable__hoverShadow {
  transition: background-color .15s ease-out;
}

/**
 * Animations
 */
@keyframes animation-wave {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(8);
    opacity: 0;
  }
}