/* ---- Topbar ---- */
.ss-topbar{
  --bg: var(--color-bg-ss);
  --bg-2: var(--color-bg-ss-2);
  --text:var(--color-text-primary)15;
  --muted:var(--color-text-ss-muted);
  --pill: var(--color-button-accent);
  --pill-text: var(--color-bg-ss-pill-text);
  --btn:var(--color-bg-ss-btn);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

.top-header{
  background: var(--color-bg-title);
  /*color: var(--color-bg-ss-pill-text);*/
}

body.light .top-header img,
body.cb-light .top-header img {
  filter: invert(1);
}

.ss-topbar{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;

  width: 100%;
  /* optional: min-width: 0; */
}

/*.ss-logo   {  margin-right: 22%;}*/

/* Logo */
.ss-logo{
  display:flex;
  align-items:center;
  position: relative;  
  min-width:96px;
}

.ss-beta-text {
  background: linear-gradient(to right, var(--color-text-primary), #00aee7);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 12px;
  position: absolute;
  top: 42px;
  left: 42px;
  -webkit-text-fill-color: transparent;
}

.ss-logo-img {
  height: 64px;
  width: auto;
  display: block;
}
.ss-logo-top{ font-size:12px; opacity:.85; }
.ss-logo-bottom{ font-size:12px; opacity:.75; }
.ss-logo-mark{
  display:inline-grid; place-items:center;
  width:18px; height:18px;
  color:#9aa3ff;
}
body.light .ss-logo-mark {
    filter: invert(1);
}

.ss-menu{
  display:flex;
  align-items:center;
  justify-content: center;
  min-width: 424px;
  max-width: 624px;
  gap:16px;
  flex:1 1 auto;
}
.ss-menu a{
  text-decoration:none;
}
.ss-menu .ss-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  font-size:13px;
  background: var(--color-button-primary);
  color: var(--color-text-primary);
  border: 1px solid transparent;
  text-decoration:none;
  border-radius:6px;
}

.ss-menu .ss-link.disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.ss-menu .ss-link:hover{
    border: 1px solid var(--color-border-hover);
}

.ss-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ss-pill-btn{
  --collapsed: 40px;
  --expanded: 110px;

  height:40px;
  width:var(--collapsed);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border-radius: 8px;

  background: var(--color-button-primary);
  border:1px solid transparent;

  color: var(--color-icon-primary);
  cursor:pointer;
  overflow:hidden;
  white-space:nowrap;

  transition: background .15s, border-color .15s, box-shadow .2s, color .15s, width 1s;
    /* all .5s ease; */
    /* background .15s, border-color .15s, box-shadow .2s; */
}
.ss-pill-btn[title="Log in"] {
    --expanded: 100px;
}

#watchlist-btn {
    --expanded: 140px;
}
.ss-actions .ss-pill-long-btn{
  --collapsed: 40px;
  --expanded: 320px;

  height:40px;
  width:var(--collapsed);
  display:flex;
  align-items:center;
  gap:3px;
  padding:0 10px;
  border-radius: 8px;
  background: var(--color-button-primary);
  border:1px solid transparent;
  color: var(--color-text-primary);
  cursor:pointer;
  /*overflow:hidden;*/
  white-space:nowrap;
  transition: background .15s, border-color .15s, box-shadow .2s, color .15s, width 1s, width 1s;

  /* transition: */
    /* all .5s ease; */
}

.ss-actions .ss-pill-long-btn.open,
.ss-actions .ss-pill-btn:hover {
    width: var(--expanded);
}

.ss-pill-btn .icon, .ss-pill-long-btn .icon{ display:grid; place-items:center; flex:0 0 auto; }
.ss-pill-btn .label, .ss-pill-long-btn .label{
  opacity:0; transform:translateX(-6px);
  transition:opacity .18s ease, transform .18s ease;
  width: 100%;
}
.ss-pill-long-btn input {
    flex-grow: 1;
    width: 100%;
    line-height: 24px;
    background-color: transparent;
    color: var(--color-text-primary);
    border: none;
    outline: none;
}

.ss-pill-btn:hover,
.ss-pill-btn:focus-visible,
.ss-pill-long-btn.open {
  /* width: var(--expanded); */
  background: var(--color-button-secondary);
  border-color:  var(--color-border-hover);
  /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);*/
}

.ss-pill-btn:hover .label,
.ss-pill-btn:focus-visible .label,
.ss-pill-long-btn.open .label {
  opacity: 1;
  transform: none;
}

.ss-pill-btn.is-open,
.ss-pill-long-btn.is-open{
    /* width: var(--expanded); */
    background: var(--color-button-secondary);
    border-color:  var(--color-border-hover);
    /*box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);*/
}
.ss-pill-btn.is-open .label,
.ss-pill-long-btn.is-open .label{
    opacity:1; transform:none;
}

 /* search */
.ss-actions {
  position: relative;
}
.ss-actions .ss-pill-long-btn.open{
  z-index: 5;
  background: var(--color-button-secondary);
}
.ss-actions .suggestions-container {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 40px;
  width: 320px;
  background: var(--color-bg-block);
  border: 1px solid var(--color-border-popup);
  border-radius: 8px;
  display: none;
}
.ss-actions .suggestions-container.show {
    display: flex;
}
.ss-actions .suggestions-container .suggestions-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 8px 8px 16px;
}
.ss-actions .suggestions-container .suggestions-list .item {
  display: flex;
  width: 100%;
  height: 32px;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  position: relative;



  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
}
.ss-actions .suggestions-container .suggestions-list .item .company {
  font-weight: 500;
  opacity: 0.5;
  width: 200px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.ss-actions .suggestions-container .suggestions-list .item button {
  width: 120px;
  min-width: 120px;
  height: 32px;
  background: var(--color-button-accent);
  color: var(--color-text-button-accent);
  border-radius: 8px;
  border: none;
  outline: none;

  opacity: 0;
  pointer-events: none;
  transition: 300ms;
  margin-left: auto;
  cursor: pointer;
  display: none;
  /*position: absolute;*/
  /*right: 0;*/
  /*top: 0;*/
}
.ss-actions .suggestions-container .suggestions-list .item:hover .ticker,
.ss-actions .suggestions-container .suggestions-list .item:hover .company {
  text-decoration: underline;
}
.ss-actions .suggestions-container .suggestions-list .item:hover button {
    opacity: 0.5;
    pointer-events: unset;
    display: inline-block;
}
.ss-actions .suggestions-container .suggestions-list .item button:hover {
  opacity: 1;
  pointer-events: unset;
}

#main-header .auth-button.hidden, 
#main-header .account-button.hidden {
  display: none;
}