libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.scss
@import '../../core/src/style/variables';

:host {
  width: 100%;
  display: flex;
  --dt-copy-to-clipboard-button-success-background: #{$green-500};
  --dt-copy-to-clipboard-button-success-bordercolor: #{$green-500};
  --dt-copy-to-clipboard-button-success-input-bordercolor: #{$green-500};
  --dt-copy-to-clipboard-button-dark-input-bordercolor: #{$gray-900};
  --dt-copy-to-clipboard-button-dark-input-color: #{$gray-400};

  .dt-copy-to-clipboard-input-wrap {
    flex-grow: 1;
    margin-right: 8px;
  }

  ::ng-deep .dt-copy-to-clipboard-successful.dt-input:not([disabled]) {
    border: 1px solid
      var(--dt-copy-to-clipboard-button-success-input-bordercolor);
    box-shadow: none;
  }

  .dt-copy-to-clipboard-btn-button {
    align-self: flex-end;
    min-width: 80px;
  }
  ::ng-deep button.dt-button.dt-copy-to-clipboard-successful,
  ::ng-deep
    button.dt-button.dt-copy-to-clipboard-successful:hover:not([disabled]) {
    background-color: var(--dt-copy-to-clipboard-button-success-background);
    border: 1px solid var(--dt-copy-to-clipboard-button-success-bordercolor);
    box-shadow: none;
  }
}

/* Dark theme */
:host-context(.dt-theme-dark) {
  --dt-copy-to-clipboard-button-success-background: #{$green-500};
  --dt-copy-to-clipboard-button-success-bordercolor: #{$white};

  /* Change the style of the dt-input to look hollow in default
   * and within the context dialog */
  ::ng-deep .dt-input,
  .dt-context-dialog-content :host ::ng-deep .dt-input {
    background-color: var(--dt-copy-to-clipboard-button-dark-input-bordercolor);
    color: var(--dt-copy-to-clipboard-button-dark-input-color);
  }
}
