// ============================================================================
// :: Copy
// ============================================================================
/**
 * Very simplistic button component used to display two states: idle and success
 * when copying a certain value.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-copy {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-copy__action-idle {
  display: block;
}

.bp-copy__action-succes {
  display: none;
}

// ============================================================================
// :: States
// ============================================================================
.bp-copy {

  &.is-copied {
    cursor: not-allowed;

    .bp-copy__action-idle {
      display: none;
    }

    .bp-copy__action-succes {
      display: block;
    }
  }
}