// ============================================================================
// :: Current
// ============================================================================
/**
 * Current helps display 2 components properly in a view: the bp-button and
 * bp-version component. Changes the standard layout of both for multiple
 * handheld devices.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-current {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  @include respond-at($bp-breakpoint-tablet-base) {
    flex-direction: row;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-current__content {
  border: none;
  padding: 0;

  /**
   * Change standard behavour of bp-log__container where below tablet devices
   * everything is placed underneath each other
   */
  .bp-log__container {

    @include respond-to($bp-breakpoint-tablet-base) {
      flex-direction: column;
    }
  }

  /**
   * Change standard behaviour of bp-log_number where the number will be
   * displayed above the text with some margin on devices below tablet.
   */
  .bp-log__number {

    @include respond-to($bp-breakpoint-tablet-base) {
      width: auto;
      margin-right: 0;
      margin-bottom: 1rem;
    }

    &::after {

      @include respond-to($bp-breakpoint-tablet-base) {
        content: none;
      }
    }
  }

  /**
   * Change standard behaviour of bp-log_text where the text will be
   * centered.
   */
  .bp-log__text {
    text-align: center;
  }
}

.bp-current__action {
  margin-top: 2rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin-left: 2rem;
    margin-top: 0;
  }
}