@import '../../styles/app';

.root {
  height: 100%;
  @include media-breakpoint-up('md') {
    margin-left: $sidebar-width;

    @media print {
      margin-left: 0;
    }
  }

  // Sidebar on the right
  &.sidebar-right {
    @include media-breakpoint-up('md') {
      margin-left: 0;
      margin-right: calc(#{$sidebar-width} + 30px);
    }
  }

  // Sidebar hidden
  &.sidebar-hidden {
    @include media-breakpoint-up('md') {
      margin-left: 0;
      margin-right: 0;
    }
  }
}

.content {
  position: relative;
  flex-grow: 1;
  // 1rem for footer height
  padding: $content-padding $content-padding ($content-padding + 1rem);

  @media (max-width: breakpoint-max(sm)) {
    padding: 20px 15px 40px;
  }

  // hammers disallows text selection, allowing it for large screens
  @media (min-width: breakpoint-min(sm)) {
    user-select: auto !important;
  }
}

.content-breadcrumb {
  margin-bottom: 0.5rem;
  padding: 0;
  background: transparent;
  font-size: $font-size-larger;

  .breadcrumb-item {
    color: $text-muted;

    a {
      color: $link-color;
      text-decoration: none;

      &:hover {
        color: lighten($link-color, 10%);
        text-decoration: underline;
      }
    }

    &:first-child {
      color: $text-muted !important;

      a {
        color: $text-muted;
        pointer-events: none;
      }
    }

    &.active {
      color: $text-color;
    }

    & + .breadcrumb-item::before {
      content: '>';
      color: $text-muted;
    }
  }
}

.contentFooter {
  position: absolute;
  bottom: 15px;
  color: $text-muted;
  padding: 0 $content-padding;
}
