@import (reference) "../variables/legacy-variables.less";
@import (reference) "./mixins/_logical-properties.less";
@import (reference) "./ring.less";

.close {
  .float(right);

  color: var(--color-content-accent);
  text-decoration: none;

  .np-theme-personal & {
    color: var(--color-interactive-primary);
  }

  &:hover {
    color: var(--color-content-accent-hover);
    text-decoration: none;
    cursor: pointer;

    .np-theme-personal & {
      color: var(--color-interactive-primary-hover);
    }
  }

  .focus-ring();

  &:active {
    color: var(--color-content-accent-active);
  }

  // Additional properties for button version
  // iOS requires the button element instead of an anchor tag.
  // If you want the anchor version, it requires `href="#"`.
  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
  button& {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    appearance: none;

    .np-theme-personal & {
      &:hover {
        background: initial;
      }
    }
  }
}