/* A security quote row: symbol, exchange, full name, price and change.
 * Shared by the dashboard watchlist and the watchlist editor's search results. */
@layer components {
  /* The row is wrapped in an anchor, so the colour has to be reset on the
     ancestor rather than inside */
  .security-quote__link {
    color: inherit;
    display: block;
  }

  .security-quote {
    display: flex;
    gap: var(--inline-space-half);
    justify-content: space-between;
  }

  .security-quote__main {
    flex-grow: 1;
    min-inline-size: 0;
  }

  .security-quote__exchange {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
  }

  .security-quote__fullname {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .security-quote__price {
    color: var(--color-ink-medium);
    display: block;
    text-align: end;
  }

  .security-quote__change {
    display: block;
    text-align: end;
  }

  /* Watch toggle
  /* ------------------------------------------------------------------------ */

  .btn-toggle {
    align-items: center;
    aspect-ratio: 1;
    background-color: transparent;
    block-size: var(--icon-md);
    border-radius: 50%;
    border: var(--border);
    color: var(--color-ink-medium);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-family: var(--font-mono);
    inline-size: var(--icon-md);
    justify-content: center;
    line-height: 1;
    padding: 0;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-link);
        border-color: var(--color-link);
        color: var(--color-ink-inverted);
      }
    }

    &[data-state="on"] {
      background-color: var(--color-link);
      border-color: var(--color-link);
      color: var(--color-ink-inverted);
    }
  }

  /* Watchlist editor
  /* ------------------------------------------------------------------------ */

  .watchlist-editor {
    margin-inline: auto;
    max-inline-size: 40em;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .watchlist-editor__search {
    margin-block-end: var(--block-space-double);
    position: relative;
  }

  .watchlist-editor__results,
  .watchlist-editor__rows {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .watchlist-editor__result,
  .watchlist-editor__row {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .watchlist-editor__result > :last-child {
    flex-grow: 1;
    min-inline-size: 0;
  }

  .security-name {
    flex-grow: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    small {
      color: var(--color-ink-medium);
      font-size: var(--text-x-small);
    }

    > span {
      color: var(--color-ink-medium);
      display: block;
      font-size: var(--text-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .watchlist-editor__position {
    inline-size: 5rem;
  }

  .watchlist-editor__handle {
    block-size: var(--icon-md);
    color: var(--color-ink-medium);
    cursor: move;
    flex: none;
    inline-size: var(--icon-md);
  }

  .dragging {
    opacity: 0.3;
  }

  /* Dashboard section width picker — hidden on phones, where every section
     spans the full width anyway */
  .dashboard-edit__width {
    display: none;

    @media (min-width: 640px) {
      display: inline;
      inline-size: 10ch;
    }
  }
}