.ds-copy-field {
  @include reset;
  @include stack-space($space-xx-small);
  position: relative;
  font-family: $font-family-text;
  line-height: $line-height-base;
  padding: $space-x-small $space-small;
  border-radius: $border-radius-base;
  letter-spacing: $letter-spacing-small;
  background-color: $background-color-softer;
}

.ds-copy-field-small {
  font-size: $font-size-small;
}

.ds-copy-field-large {
  font-size: $font-size-large;
}

.ds-copy-field-link {
  @include reset;
  position: absolute;
  right: $space-xx-small;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
}

.ds-copy-field-message {
  @include reset;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  visibility: visible;
  opacity: 1;
  transition: all $duration-x-long $ease-out;
}

.ds-copy-field-message-text {
  @include reset;
  padding: $space-x-small $space-small;
  transition: all $duration-x-long $ease-out;
  transform: scale(1);
  transform-origin: 0 50%;
}

.ds-copy-field-message-enter,
.ds-copy-field-message-leave-to {
  visibility: hidden;
  opacity: 0;

  .ds-copy-field-message-text {
    transform: scale(1.2);
  }
}