/* ==========================================================================
   #DETAILS BAR
   ========================================================================== */

.hmcts-details-bar {
  @include govuk-clearfix;
  background-color: govuk-colour("grey-4");
  box-shadow: inset 0 -1px 0 0 govuk-colour("grey-2"); /* Takes up no space */
  color: govuk-colour("black");
  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
  padding-top: govuk-spacing(2);
}


.hmcts-details-bar__container {
  @include hmcts-width-container;
  font-size: .1px; /* Hide whitespace between elements */
  text-align: justify; /* Trick to remove the need for floats */

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
  }

}


.hmcts-details-bar__reference {
  @include govuk-font(16);
  display: inline-block;
  margin-right: govuk-spacing(2);
  vertical-align: top;
}


.hmcts-details-bar__title {
  @include govuk-font(16);
  display: inline-block;
  vertical-align: top;
}


.hmcts-details-bar__details {
  margin-right: govuk-spacing(2);
  padding-top: govuk-spacing(1);
  padding-bottom: govuk-spacing(1);

  @include mq($from: tablet) {
    display: inline-block;
    vertical-align: top;
    padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */
    padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */
  }

}


.hmcts-details-bar__actions {
  margin-bottom: - govuk-spacing(2);

  @include mq($from: tablet) {
    display: inline-block;
    vertical-align: middle;
  }

}


.hmcts-details-bar__action {
  display: inline-block;
  margin-right: govuk-spacing(2);
  margin-bottom: govuk-spacing(2);
  width: auto; // Override GDS’s 100% width


  &:last-child {
    margin-right: 0;
  }

}