// ============================================================================
// :: Icon button
// ============================================================================
/**
 * Simple component to visualize an icon in a circular background. It can be
 * supported by text and can be for example be used as a back button.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-icon-button {
  display: inline-block;

  text-decoration: none;

  border: none;
  background-color: transparent;

  // Style the icon
  &::before {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 3.6rem;
    height: 3.6rem;

    font-size: $icon-size-base;

    border-radius: $border-radius-round;
    color: $text-color-white;
    background-color: $primary-color-base;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-icon-button--inverted {

  // Style the icon
  &::before {
    color: $text-color-white;
    background-color: rgba($background-color-white, 0.2);
  }

  .a-icon-button__text {
    color: $text-color-white;
  }
}