// Docs
//
//
//


.component {
  padding-bottom: 0;
  overflow: visible;
  

  > .container {
    margin-bottom: 20px;
  }

  [class*="container"] {
    .row:not(:last-child) {
      margin-bottom: 30px;
    }
  }

  @include media-breakpoint-up(lg) { 
    max-width: 95%; 
  }

  @include media-breakpoint-up(xl) { 
    max-width: 80%; 
  }

  > .tab-content {
    > .tab-pane {
      @extend %boxed;
      @include border-radius;
      overflow: hidden;

      &[class*="bg-light"] {
        border: $border-width solid $border-color;
      }
    }
  }
}

//
// Example
//
.component-example {
  position: relative;
  padding: 75px 0;
  overflow: hidden;

  &[class*="-fit"] {
    padding: 0;
  }

  &[class*="-fluid"] {
    padding: $grid-gutter-width ($grid-gutter-width / 2);
  }
}


//
// Details
//
.component-details {
  position: relative;
  padding: 40px 0;
  border-top: $border-width solid $border-color;
}

.component-details-markup,
.component-details-reference {
  position: relative;
  padding-top: 30px;

  &::before {
    position: absolute;
    top: 0;
    left: ($grid-gutter-width / 2);
    content: "Markup";
    font-size: 12px;
    letter-spacing: $letter-spacing-lg;
    text-transform: uppercase;
  }
}

.component-details-reference {
  &::before {
    content: "Reference";
  }
}



//
// Demo
//
.btn-demo {
  > .btn {
    margin: 0 .5rem .5rem 0;
  }
}

.text-white {
  &.component-details {
    border-color: $text-white-border;
  }
}