@import 'variables/colors';
@import 'variables/z-index';

.skip-to-content {
  position: absolute;
  top: -1000px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: $msfa__z-index-skip-to-content;
  text-align: center;
  padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
  display: block;
  background-color: var(--digi--ui--color--complementary-alt);
  color: var(--digi--typography--color--text--light);

  &:focus {
    position: fixed;
    top: 0;
    width: auto;
    height: auto;
    text-decoration: none;
  }

  &:hover {
    text-decoration: underline;
  }
}
