// ============================================================================
// :: Log
// ============================================================================
/**
 * A log is used mostly in a list of other logs and is used to fill up a
 * complete changelog. It can be combined with a collapse in order to show
 * and hide the content containing the changes.
 */

// ============================================================================
// :: Settings
// ============================================================================
$number-width: 18rem;
$number-width-mobile: 12rem;

// ============================================================================
// :: Root
// ============================================================================
.bp-log {
  padding: 2rem 0;

  border-top: 1px solid $bp-border-color-base;
  border-bottom: 1px solid $bp-border-color-base;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-log__container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bp-log__header {

  @include respond-at($bp-breakpoint-tablet-base) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.bp-log__text {
  font-size: $bp-font-size-base;
  font-weight: $bp-font-weight-regular;
  line-height: $bp-line-height-base;

  color: $bp-text-color-dark;
}

.bp-log__number {
  position: relative;

  // Display line next to the version number by applying flexbox
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 2rem;

  font-weight: $bp-font-weight-bold;
  font-size: $bp-font-size-base;
  letter-spacing: 0.1rem;

  color: $bp-text-color-dark;

  @include respond-at($bp-breakpoint-tablet-base) {
    min-width: $number-width-mobile;
    margin-right: 0;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    min-width: $number-width;
  }

  // Create line after the version number
  &::after {
    // Set the line width to 100% to always fill up the empty space
    width: 100%;
    height: 0.1rem;
    margin: 0 3rem 0 0;

    background-color: $bp-background-color-dark;

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

.bp-log__content {
  padding-top: 2rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    padding-left: $number-width-mobile;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    padding-left: $number-width;
  }
}