:root {
  --asakua-brand-navy: #0a1628;
  --asakua-brand-mark-size: 40px;
}

.asakua-brand-mark {
  display: inline-block;
  width: var(--asakua-brand-mark-size);
  height: var(--asakua-brand-mark-size);
  flex: 0 0 auto;
  color: var(--asakua-brand-navy);
  background-color: currentColor;
  -webkit-mask: url("/public/brand/asakua-mark.svg") center / contain no-repeat;
  mask: url("/public/brand/asakua-mark.svg") center / contain no-repeat;
}

.asakua-brand-mark--on-light {
  color: var(--asakua-brand-navy);
}

.asakua-brand-mark--on-dark {
  color: #fff;
}