/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.pinpath-logo-icon {
  --pinpath-logo-fill: #0a0f1d;
  --pinpath-logo-detail: #ffffff;
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: visible;
}

.pinpath-logo-icon--nav {
  width: 34px;
  height: 34px;
}

.pinpath-logo-icon--landing {
  width: 30px;
  height: 30px;
}

.pinpath-logo-icon--black {
  --pinpath-logo-fill: #05070d;
  --pinpath-logo-detail: #ffffff;
}

.pinpath-logo-icon--passport {
  --pinpath-logo-fill: #0e2a47;
  --pinpath-logo-detail: #f4a522;
}

.pinpath-logo-icon--white {
  --pinpath-logo-fill: #ffffff;
  --pinpath-logo-detail: #05070d;
}

.pinpath-logo-icon__pin {
  fill: var(--pinpath-logo-fill);
  filter: drop-shadow(0 10px 18px rgba(36, 54, 94, .22));
}

.pinpath-logo-icon__route,
.pinpath-logo-icon__stem {
  fill: none;
  stroke: var(--pinpath-logo-detail);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pinpath-logo-icon__route {
  stroke-width: 10.5;
}

.pinpath-logo-icon__stem {
  stroke-width: 14;
}

.pinpath-logo-icon__detail,
.pinpath-logo-icon__plane {
  fill: var(--pinpath-logo-detail);
}

.pinpath-logo-icon__pin-hole {
  fill: var(--pinpath-logo-fill);
}