.copy-to-clipboard {

  position: relative;
  padding-bottom: 38px;  // height of button
  display: flex;

  &__name {
    @include bold-19;
    margin-bottom: 5px;
  }

  &__notice,
  &__key {
    font-family: monospace;
    display: block;
    padding: 0 0 10px 0;
    margin: auto 0;
  }

  &__button--show,
  &__button--copy {

    position: absolute;
    bottom: 2px;
    left: 0px;

    &:active {
      top: auto;
    }

  }

}

.copy-to-clipboard {

  position: relative;
  padding-bottom: 38px;  // height of button
  display: flex;

  &__name {
    @include bold-19;
    margin-bottom: 5px;
  }

  &__notice,
  &__value {
    font-family: monospace;
    display: block;
    padding: 0 0 10px 0;
    margin: auto 0;
  }

  &__button--show,
  &__button--copy {

    position: absolute;
    bottom: 2px;
    left: 0px;

    &:active {
      top: auto;
    }

  }

}

Fix styles for API key value not being applied
Fix styles for API key value not being applied

When the component was renamed from ‘API key’ to ‘Copy to clipboard’ the class for the thing to be copied changed from `api-key__key` to `copy-to-clipboard__value`. While the CSS was updated to reflect the change from `api-key` to `copy-to-clipboard` the change from `__key` to `__value` was not made.

Before: https://github.com/alphagov/notifications-admin/blob/4921e6d46e10fe8fde9671e55f43a9583884030e/app/templates/components/api-key.html
After: https://github.com/alphagov/notifications-admin/blob/85f6881a5642d594797cab54c9990d40991f379a/app/templates/components/copy-to-clipboard.html

This commit changes updates the CSS to reflect the latter change, so that the styles get applied properly.