@import 'monolith/monolith';

.trim-margin { margin: 0 !important; }
.trim-padding { padding: 0 !important; }

.trim-margin-top { margin-top: 0 !important; }
.trim-margin-right { margin-right: 0 !important; }
.trim-margin-bottom { margin-bottom: 0 !important; }
.trim-margin-left { margin-left: 0 !important; }

.trim-padding-top { padding-top: 0 !important; }
.trim-padding-right { padding-right: 0 !important; }
.trim-padding-bottom { padding-bottom: 0 !important; }
.trim-padding-left { padding-left: 0 !important; }

.content {
  padding: 16px 0;
  width: 100%;
  background: lightgray;
  border-radius: 40px;
}

.content{
  &.blue { background: teal; }
  &.red { background: crimson; }
  &.green { background: green; }
}

.gray {
  background: lightgray;

  .content { background: white; }
}

// button invert block

.invert-block {
  background: black;
  border-radius: 4px;
  padding: 1rem;
  margin: 16px 0;
}

// section headers

.site_h3 {
  text-transform: uppercase;
  color: goldenrod;
  border-bottom: 2px solid goldenrod;
  padding: 15px 0 10px 0;
  font-size: 18px;
}

// code

.snippet {
  background: #f4f4f4;
  display: block;
  margin: 50px 0;
  overflow-x: scroll;
  color: #777;
  line-height: 1.5;
}

// nav

.nav { margin: 0 auto; }

.nav-list {
  @include flex(flex, column, nowrap, $align: center);

  font-family: $global-font-sans;
  font-size: 18px;
  max-width: 600px;
  padding: 0;
  text-align: center;

  @include breakpoint-up(small) {
    @include flex(flex, row, nowrap, $align: center);
  }

  &.vertical {
    @include flex(flex, column, nowrap, $align: center);
  }
}

.nav-item {
  list-style-type: none;
  border-bottom: 1px solid #efefef;
  margin: 20px auto 10px auto;
  padding: 0;
}

.nav-item .nav-link {
  display: inline-block; // otherwise <a> ignores padding
  margin: 0 10px -1px 10px; // offset border-bottom
  padding: 0 10px 10px 10px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  color: black;
  transition: 0.2s ease-out;

  &:hover {
    border-color: $primary-color;
    color: $primary-color;
  }
}