.skip-to-main-content {
  a.skip-link {
    background: $white;
    border-bottom: none;
    color: $grey-1;
    display: block;
    font-size: $skip-to-main-content-font-size;
    font-weight: $skip-to-main-content-font-weight;
    line-height: 1.25rem;
    text-align: center;



    &:focus,
    &:active {
      background: $white;
      color: $grey-1;
      text-decoration: none;
    }

    &:hover{
      background: $ochre;
      color: $white !important;
      text-decoration: none;
          }
  }

  a:focus {
    outline: 2px dotted $ochre-focus;
  }
}

.skip-to-main-content.active {
  a.skip-link {
    background: $white;
    color: $grey-1;
    text-decoration: none;

    &:hover{
      background: $ochre;
      color: $white !important;
      text-decoration: none;
    }
  }

  .sr-only-focusable {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  a {
    outline: 2px dotted $ochre;
  }
}