// Titlebar
//
// Structure to title a section with the title to the left and links
// to the right.
//
// .titlebar-bigborder - border at the top
// .titlebar-padded - padding at the bottom
//
// Styleguide: Component.Titlebar

.titlebar {
  @include tablet {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  //
  .titlebar_title {
    @include tablet {
      .subtitle,
      .title {
        // margin: 0;
        color: currentColor;
      }
    }
  }
  .titlebar_links {
    color: currentColor;
    font-size: $size-6;
    font-weight: 700;
    //
    a {
      color: currentColor;
    }
    a:hover {
      color: $blue;
    }
  }
}

.titlebar-bigborder {
  margin-top: $column-gap * 2;
  padding-top: $column-gap * 2;
  @extend %bigborder;
}

.titlebar-padded {
  padding-bottom: $column-gap * 2;
}

.titlebar + .byline {
  margin-top: 1.5rem;
}

.header-search {
  .form-submit.button {
    @include control-medium;
  }
  .form-text.input {
    @include control-medium;
    @include tablet {
      width: 20em;
    }
  }
}
