$govuk-button-colour: govuk-colour("white");
$govuk-button-text-colour: govuk-colour("black");

.hods-status-message {
  color: govuk-colour("white");
  background-color: govuk-colour("blue");
  @include govuk-responsive-padding(4, "all");

  &__status {
    margin: 0;
    font-weight: bold;
  }

  &__extra {
    margin: 0;
    font-weight: normal;
    display: block;
    @include govuk-responsive-margin(3, "top");
  }

  &__actions {
    @extend .govuk-button-group;
    justify-content: end;
    margin: 0;
    padding: 0;
    @include govuk-responsive-margin(3, "top");

    li {
      list-style: none;
      padding: 0;
      width: 100%;

      &:last-child > :last-child {
        margin-bottom: 0;
      }
    }

    &__link {
      @extend .govuk-button;

      &, &:active, &:hover, &:link, &:visited {
        color: $govuk-button-text-colour;
        background-color: $govuk-button-colour;
        border: $govuk-button-text-colour 1px solid;
        margin: 0;
        @include govuk-responsive-margin(3, "bottom");
      }

      &:hover {
        background-color: govuk-shade($govuk-button-colour, 10%);
      }
    }
  }

  @include govuk-media-query($from: tablet) {
    display: flex;
    align-items: center;
    justify-content: space-between;

    div:first-child {
      display: flex;
      align-items: center;
    }

    &__status {
      margin: 0;
      @include govuk-responsive-margin(3, "right");
      @include govuk-font(24);
      font-weight: bold;
    }

    &__extra {
      margin: 0;
      flex-grow: 1;
      @include govuk-font(19);
    }

    &__actions {
      margin: 0;

      li {
        margin: 0;
        width: auto;
        @include govuk-responsive-margin(1, "left");
      }

      &__link {
        &, &:active, &:hover, &:link, &:visited {
          @include govuk-responsive-margin(1, "top");
          @include govuk-responsive-margin(1, "bottom");
        }
      }
    }
  }
}