@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.ui-copy-button {
  $self: &;

  @include txt-r-m;

  display: inline-block;
  position: relative;
  height: 16px;
  text-align: left;
  width: min-content;
  user-select: none;
  vertical-align: middle;

  &__default,
  &__copied {
    transition: .2s ease-in-out;
    transition-property: transform, opacity;
    transform-origin: center;

    #{$self}.is-active & {
      transform: translateY(-16px);
    }
  }

  &__default {
    opacity: 1;

    #{$self}.is-active & {
      opacity: 0;
      pointer-events: none;
    }
  }

  &__copied {
    @include txt-r-m;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: $clr-cyan-500;
    opacity: 0;
    pointer-events: none;

    #{$self}.is-active & {
      opacity: 1;
    }
  }
}