/*
  CSS-only flags for the Wiki language selector.
  Uses the country identifiers from Pixelastic CSS Flags (esp, gbr, usa):
  https://pixelastic.github.io/css-flags/
*/
.wiki-flag {
  position: relative;
  display: inline-block;
  width: 1.55rem;
  height: 1rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.wiki-flag-esp {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.wiki-flag-gbr {
  width: 2rem;
  background-color: #012169;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H30zH0V15zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='m0 0 60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='m0 0 60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wiki-flag-usa {
  background: repeating-linear-gradient(to bottom, #b22234 0 7.69%, #fff 7.69% 15.38%);
}

.wiki-flag-usa::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 40%;
  height: 53.85%;
  content: "";
  background:
    radial-gradient(circle at 22% 20%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 20%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 78% 20%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 35% 42%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 64% 42%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 22% 66%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 66%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 78% 66%, #fff 0 4%, transparent 4.5%),
    #3c3b6e;
}