@use "./variables" as *;

.#{$component-prefix}floating-bubble {
  position: fixed;
  top: 0;
  right: $floating-bubble-initial-gap;
  bottom: $floating-bubble-initial-gap;
  left: 0;
  z-index: $floating-bubble-z-index;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $floating-bubble-size;
  height: $floating-bubble-size;
  overflow: hidden;
  color: $floating-bubble-color;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  background: $floating-bubble-background;
  border-radius: $floating-bubble-border-radius;
  transition: $floating-bubble-duration;

  &:active {
    opacity: 0.8;
  }

  &__icon {
    font-size: $floating-bubble-icon-size;
  }
}