@import "govuk_publishing_components/individual_component_support";

.gem-c-contextual-guidance {
  .govuk-grid-column-one-third {
    position: relative;
  }

  &:last-of-type {
    .gem-c-contextual-guidance__wrapper {
      position: relative;
      width: 100%;
    }
  }
}

.gem-c-contextual-guidance__wrapper {
  position: relative;
  margin-bottom: govuk-spacing(7);
  @include govuk-font(19);

  @include govuk-media-query($from: tablet) {
    margin-bottom: govuk-spacing(7);
    padding-top: govuk-spacing(6);
  }
}

.js-enabled {
  .gem-c-contextual-guidance__wrapper {
    display: none;

    @include govuk-media-query($from: tablet) {
      position: absolute;
      width: calc(100% - #{govuk-spacing(6)});
    }
  }
}

.gem-c-contextual-guidance__guidance {
  padding-left: govuk-spacing(3);
  border-left: 4px solid $govuk-focus-colour;
  background: govuk-colour("white");

  @include govuk-media-query($from: tablet) {
    padding-top: govuk-spacing(5);
    padding-left: 0;
    border-top: 5px solid $govuk-focus-colour;
    border-left: 0;
  }
}