@use 'settings' as *;

.cc-floating-button {
  position: fixed;
  right: $cc-viewport-inset;
  bottom: $cc-viewport-inset;
  z-index: var(--cc-z-index);
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-sm);
  min-height: 2.875em;
  padding: 0.5em 0.875em 0.5em 0.625em;
  color: var(--cc-color-primary-text);
  font-family: var(--cc-font-family);
  font-size: var(--cc-font-size);
  font-weight: 600;
  line-height: 1.25;
  background: var(--cc-color-primary);
  border: 0.0625em solid transparent;
  border-radius: 62.4375em;
  box-shadow: var(--cc-shadow);
  cursor: pointer;
  animation: cc-enter var(--cc-duration) var(--cc-easing) both;
  transition:
    background-color var(--cc-duration) var(--cc-easing),
    box-shadow var(--cc-duration) var(--cc-easing),
    transform var(--cc-duration) var(--cc-easing);

  &[dir='rtl'] {
    right: auto;
    left: $cc-viewport-inset;
    padding: 0.5em 0.625em 0.5em 0.875em;
  }
}

.cc-floating-button:hover {
  background: var(--cc-color-primary-hover);
}

.cc-floating-button:active {
  background: var(--cc-color-primary-active);
  transform: scale(0.98);
}

.cc-floating-button__icon {
  display: inline-grid;
  width: 1.875em;
  height: 1.875em;
  place-items: center;
  overflow: hidden;
  background: rgb(255 255 255 / 18%);
  border-radius: 50%;
}

.cc-floating-button__icon img,
.cc-floating-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-floating-button__text {
  white-space: nowrap;
}