/* The phone-only create plus that sits in the header's empty left cell, where Instagram
   keeps its own. It has to load on every page, not just /create, because the header is
   shared chrome. New filename because hCDN pins CSS for a week. */

@media (max-width: 820px) {
  .mtv-header .mtv-authnav .mtv-plus {
    order: 0;
    margin-right: auto;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: -4px;
    color: var(--mtv-magenta);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mtv-header .mtv-authnav .mtv-plus:active { opacity: .55; }
  .mtv-header .mtv-authnav .mtv-plus:focus-visible {
    outline: 2px solid var(--mtv-magenta);
    outline-offset: 2px;
    border-radius: 12px;
  }

  :root[data-theme="dark"] .mtv-header .mtv-authnav .mtv-plus { color: var(--dk-pink-text, #FF87AC); }
}
