// ============================================================================
// :: Button
// ============================================================================
/**
 * Scope defined especially for the visual representation of a button
 */

// ============================================================================
// :: Root
// ============================================================================
.s-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  .a-button {
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
}
// ============================================================================
// :: Modifiers
// ============================================================================
.s-button--ghost {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  padding: 5rem;

  background-color: $background-color-light;

  .a-button {
    margin-right: 0;

    margin-bottom: 2rem;
  }
}