@kelvininc/ui-components/dist/collection/components/copy-to-clipboard/copy-to-clipboard.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
  	@prop --container-width: Width of the container
  	@prop --container-padding: The container's padding
  	@prop --container-hover-background-color: The container's hover state background color
  	@prop --container-gap: The gap between the container's elements
  	@prop --icon-start-opacity: Start icon opacity
  	@prop --icon-color-default: Start icon color
  	@prop --icon-color-success: Success icon color
  	@prop --icon-background-color-success: Success icon background color
  	@prop --icon-size: The copy icon size
  **/
  --container-width: 100%;
  --container-padding: var(--spacing-md);
  --container-hover-background-color: var(--transparent);
  --container-gap: var(--spacing-md);
  --icon-start-opacity: 0;
  --icon-color-default: var(--icon-container-neutral-subtle);
  --icon-color-success: var(--icon-surface-status-success-default);
  --icon-background-color-success: var(--background-surface-neutral-inverse);
  --icon-size: var(--size-md);
}

.copy-to-clipboard-container {
  width: var(--container-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-md);
  gap: var(--container-gap);
  padding: var(--container-padding);
  box-sizing: border-box;
  transition: background-color 0.2s ease-in-out, opacity 0.25s ease-in-out;
}
.copy-to-clipboard-container:hover {
  cursor: pointer;
  background-color: var(--container-hover-background-color);
}
.copy-to-clipboard-container:hover .state-icon kv-icon {
  opacity: 1;
}
.copy-to-clipboard-container .state-icon kv-icon {
  --icon-height: var(--icon-size);
  --icon-width: var(--icon-size);
  --icon-color: var(--icon-color-default);
  opacity: var(--icon-start-opacity);
}
.copy-to-clipboard-container .state-icon--success kv-icon {
  --icon-color: var(--icon-color-success);
  --icon-background-color: var(--icon-background-color-success);
}