.host {
  display: flex;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  background-color: transparent;
  border: 0;
  transition: opacity 0.15s;
  transition-timing-function: var(--vkui--animation_easing_platform);
}

.directionLeft,
.directionRight {
  flex-direction: column;
  block-size: 100%;
}

.directionUp,
.directionDown {
  flex-direction: row;
  inline-size: 100%;
}

.icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vkui--color_icon_secondary);
  background-color: var(--vkui--color_background_contrast_themed);
  box-shadow: var(--vkui--elevation3);
}

.sizeS .icon {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 14px;
}

.sizeM .icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 24px;
}

.directionLeft {
  inset-inline-start: 0;
  -webkit-padding-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
          padding-inline-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
}

.directionRight {
  inset-inline-end: 0;
  -webkit-padding-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
          padding-inline-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
}

.directionUp {
  inset-block-start: 0;
  -webkit-padding-before: var(--vkui--size_base_padding_horizontal--regular, 16px);
          padding-block-start: var(--vkui--size_base_padding_horizontal--regular, 16px);
}

.directionDown {
  inset-block-end: 0;
  -webkit-padding-after: var(--vkui--size_base_padding_horizontal--regular, 16px);
          padding-block-end: var(--vkui--size_base_padding_horizontal--regular, 16px);
}

.directionLeft:not(.rtl) .defaultIcon,
.directionRight.rtl .defaultIcon {
  transform: rotate(180deg);
}

.directionUp .defaultIcon {
  transform: rotate(-90deg);
}

.directionDown .defaultIcon {
  transform: rotate(90deg);
}