.md-link-wrapper {
  border: var(--md-globals-border-clear);
  color: var(--mds-color-theme-text-accent-normal);
  cursor: pointer;
  outline: none !important;
  padding: 0;
  text-decoration: underline;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  display: inline-block;

  // have based a:focus style on momentum-ui.css.
  // need to overwrite focus style and src
  &:focus,
  &.focus {
    color: var(--mds-color-theme-text-accent-normal);
  }

  &:hover,
  &.hover {
    color: var(--mds-color-theme-text-accent-hover);
  }

  &:active,
  &.active {
    color: var(--mds-color-theme-text-accent-active);
  }

  &[data-inverted='true'] {
    color: var(--mds-color-theme-inverted-text-accent-normal);

    &:focus,
    &.focus {
      color: var(--mds-color-theme-inverted-text-accent-normal);
    }

    &:hover,
    &.hover {
      color: var(--mds-color-theme-inverted-text-accent-hover);
    }

    &:active,
    &.active {
      color: var(--mds-color-theme-inverted-text-accent-hover);
    }

    &[data-disabled='true'],
    &.disable {
      color: var(--mds-color-theme-text-primary-disabled);
      cursor: auto;
    }
  }

  &[data-disabled='true'],
  &.disable {
    color: var(--mds-color-theme-text-primary-disabled);
    cursor: auto;
  }
}

.md-link-container {
  display: flex;
  align-items: center;

  .md-link-icon {
    margin-left: 0.3125rem;
  }
}