@import 'variables';

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  margin-top: $spacer / 2;
  margin-bottom: $spacer / 2;
  top: $spacer;
  order: 2;

  @media (min-width: $break-point--medium) {
    width: 27%;
    margin-bottom: 0;
    margin-top: 0;
    order: 1;

    + .main {
      width: 73%;
    }
  }
}

.main {
  width: 100%;
  background: $brand-white;
  padding: 0 $spacer / 2;
  border: 1px solid $brand-grey-lighter;
  border-top: 0;
  order: 1;

  @media (min-width: $break-point--small) {
    padding-left: $spacer;
    padding-right: $spacer;
  }

  @media (min-width: $break-point--medium) {
    padding-left: $spacer * 2;
    padding-right: $spacer * 2;
    order: 2;
  }
}

.mainSingle {
  composes: main;
  max-width: 73%;
  margin: auto;
}

.version {
  color: $brand-grey-light;
  font-size: $font-size-base;
  font-family: $font-family-monospace;

  a {
    font-size: $font-size-mini;
    font-family: $font-family-base;
    font-weight: $font-weight-base;
    display: inline-block;
    margin-left: 0.5rem;
  }
}

.pathName {
  font-size: $font-size-h3;
  border-bottom: 1px solid $brand-grey-lighter;
  padding-bottom: $spacer / 2;
  margin-top: $spacer * 2;
  margin-bottom: $spacer / $line-height;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}