@import url("https://www.ripe.net/++resource++ripe.plonetheme.stylesheets/open-sans.css");

// Light is not in the css file above currently, so for now load it manually
@font-face {
  font-family: "Open Sans";
  font-style: light;
  font-weight: 100;
  src: local("Open Sans Light"), local("OpenSans-Light"),
    url("https://www.ripe.net/++resource++ripe.plonetheme.stylesheets/fonts/OpenSans-Light.ttf")
      format("truetype");
}

/* standard colours */

@l-color: #00abab;
@l-v-color: #2a6496;
@l-h-color: #2a6496;
@f-color: #58595b;
@ripe-grey: #eee;
@ripe-orange: #ff9600;
@ripe-blue: #080037;
@ripe-white: #fcfcfc;
@tag-link: #5c5d60;

// from www
@ripe-magenta: #00abab; // supportcolor text on www
@ripe-orange: #ff9600;
@f-color: #58595b;

@oim-antracite: #2a2a2a;
@oim-silver: #bdc3c7;
@oim-clouds: #ecf0f1;
@oim-universe: #f0f0f0;
@oim-carrot: #e67e22;
@oim-emerald: #2ecc71;
@oim-marker-yellow: #ffff99;

@oim-land: #eff1d7;
@oim-ocean: #9ab;

@atlas-green: #85a056;
@atlas-red: #f84417;
@atlas-darkblue: #080037;

// modern love
// @jedi-transit: #f550c4;
// @jedi-ixp: #16db3d;
// @jedi-eyeballs: #32d4d1;
// @jedi-eyeballs-no-probes: #feff22;

// done by the forces of nature
// @jedi-eyeballs: #72a168;
// @jedi-ixp: #d9d686;
// @jedi-transit: #a2cade;
// @jedi-eyeballs-no-probes: #e5dbc3;

// bright life
// @jedi-transit: lighten(#5000ff, 25%);
// @jedi-ixp: #ff8e19;
// @jedi-eyeballs-no-probes: lighten(#14cc2d, 50%);
// @jedi-eyeballs: #09b220;

// mad professor
// @jedi-transit: #f550c4;
// @jedi-ixp: #32d4d1;
// @jedi-eyeballs-no-probes: lighten(#14cc2d, 50%);
// @jedi-eyeballs: #72a168;

// radical researcher
@jedi-ixp: #ff8e19;
@jedi-transit: #a2cade;
@jedi-eyeballs: #64d46a;
@jedi-eyeballs-no-probes: #dcede6;
@jedi-anthracite: #363738;

line.p-t-p-fabric {
  stroke: @jedi-anthracite;
  opacity: 0.1;
}

g.transit {
  circle {
    stroke: @jedi-transit;
    fill: white;
    stroke-width: 4pt;
  }
  text {
    fill: @jedi-anthracite;
    stroke-width: 0.4pt;
    stroke-opacity: 1;
  }
}

g.eyeball {
  circle {
    fill: @jedi-eyeballs;
    stroke: white;
    stroke-width: 1.5pt;
  }
  text {
    fill: @jedi-anthracite;
  }
}

g.ixp {
  circle {
    fill: white;
    stroke: @jedi-ixp;
    stroke-width: 4pt;
  }

  circle {
    fill: white;
    stroke: @jedi-ixp;
    stroke-width: 4pt;
  }
}

g.eyeball-with-transit circle {
  stroke-width: 1.5pt;
  stroke: white;
  fill: @jedi-transit;
}

g.eyeball-no-probe {
  circle {
    stroke: white;
    stroke-width: 1.5pt;
    fill: @jedi-eyeballs-no-probes;
  }

  path {
    stroke: none;
    fill: @jedi-eyeballs-no-probes;
  }

  text {
    fill: darken(@jedi-eyeballs-no-probes, 15%);
  }
}

circle.bg-circle.eyeball {
  fill: @jedi-eyeballs;
  opacity: 0.1;
}

circle.interior-circle {
  fill: white;
  opacity: 1;
}

circle.error-state {
  fill: none;
  opacity: 1;
  stroke-width: 0.5;
  stroke: @jedi-anthracite;
}

.outline-ring {
  opacity: 1;

  path,
  circle,
  line {
    opacity: 1;
    stroke-opacity: 1;
    fill: none;
    stroke: @oim-antracite;
  }

  // arrowheads!
  polygon {
    stroke-opacity: 1;
    fill: @oim-antracite;
    stroke: none;
  }

  &.fat {
    stroke-width: 1.4;
  }
}

path.c-ring {
  stroke: none;
  fill: tint(@jedi-eyeballs, 20%);
  //opacity: 0.6;
}

.tooltip {
  position: absolute;
}

path:hover {
  //stroke: @oim-antracite;
  stroke-opacity: 1;
  //stroke-width: 1pt;
}

path {
  fill: none;
  stroke-width: 1pt;
  stroke-opacity: 0.6;
  stroke-linecap: round;
  stroke: red;
}

path.eyeball-eyeball {
  fill: none;
  stroke: tint(@jedi-eyeballs, 50%);
  stroke-width: 1pt;
  //stroke-opacity: 0.5;
}

path.transit-ixp,
path.eyeball-ixp,
path.ixp,
path.ixp-eyeball {
  stroke: tint(@jedi-ixp, 50%);
  fill: none;
  stroke-width: 1pt;
  /*stroke-width: 4pt;*/
  //stroke-opacity: 0.6;
}

path.ixp-ixp {
  stroke: red;
}

path.ixp-transit,
path.transit-transit,
path.eyeball-transit,
//path.transit_asn,
path.transit-eyeball {
  stroke: tint(@jedi-transit, 50%);
  fill: none;
  stroke-width: 1pt;
  /*stroke-width: 4pt;*/
  //stroke-opacity: 0.7;
}

path.transit {
  stroke: tint(@jedi-transit, 50%);
}

path.i {
  stroke-dasharray: 3, 3;
}

/* path.eyeball-ixp.i {
    stroke-dasharray: 6, 6;
    
} */

path.d:not(".eyeball") {
  stroke-width: 2pt;
}

// svg.legend {
//   width: 350px;
//   margin-left: 28px;
//   margin-top: 28px;
// }

.legend-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin: 60px 0 20px;

  max-width: 1104px;
  padding: 24px;
  background-color: lighten(aliceblue, 0.4%);

  h2 {
    margin-bottom: 24px;
    margin-top: 0;
  }

  svg {
    width: 366px;
    height: 125px;
    min-width: unset;
    min-height: unset;
  }

  .more-text {
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85em;
    margin-bottom: 18px;
    margin-left: 4px;
  }

  .more-panel {
    overflow: hidden;
    margin-top: 24px;

    .emerge {
      height: 105%;
      transition: height 0.8s 0.2s;
    }

    .disappear {
      height: 0;
      transition: height 0.8s 0.2s;
    }

    .small-graphs {
      div {
        height: 456px;
        margin: 0;
      }
    }
  }
}

div#p-t-p-fabric-panel {
  min-width: 735px;
  max-width: 1220px;
}

.p-t-p-fabric {
  // show overflow for labels
  // hard to know in advance what their length is
  overflow: visible;
  max-height: 1060px;
}

text {
  // no text-selection cursor, please
  // this is confusing with a tooltip
  cursor: default;
  fill: @jedi-anthracite;
}

g.tooltip {
  text {
    font-size: 0.7em;
    fill: white;
    cursor: default;
  }

  text.tooltip-header {
    font-weight: regular;
    fill: white;
  }

  text.tooltip-subheader {
    fill: lighten(@l-color, 12%);
    stroke: none;
  }

  rect.tooltip-bg {
    fill: @jedi-anthracite;
    stroke: @jedi-anthracite;
    stroke-width: 1;
    opacity: 1;
  }

  polyline {
    fill: @jedi-anthracite;
    stroke: none;
  }
}
/* smallGraphs flexbox */
.small-graphs,
.big-graphs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  //margin-bottom: 60px;

  svg:not(.big) {
    width: 300px;
    height: 225px;
    min-width: unset;
    min-height: unset;
  }

  svg.big {
    max-width: 1260px;
    min-width: 800px;
    min-height: 800px;
  }
}

.big-graphs {
  margin-bottom: -40px;
}

.small-graphs {
  p {
    width: 350px;
    padding-right: 16px;
  }
}

/* TEXT */

body {
  font-family: "Open Sans", Helvetica, sans-serif;
  font-weight: 100;
  font-size: 16px;
  text-rendering: geometricPrecision;
}

svg text {
  font-family: "Open Sans", Helvetica, Arial, "sans-serif";
  font-size: 0.85em;
  transform: translate(3 0 0);
}

h1.main {
  font-weight: 400;
  font-size: 2em;
}

div#labs-playground {
  margin: 26px;

  span {
    font-family: "Courier New", Courier, monospace;
    background-color: @oim-marker-yellow;
  }
}

class.story {
  font-size: 1em;
}

.small-graphs p {
  font-size: 0.85em;
  line-height: 1.5em;
}

#ptp-fabric-panel {
  margin-left: 26px;
  p {
    //margin-bottom: 59px;
    max-width: 670px;
  }

  .status-msg {
    position: absolute;
    z-index: 10;
  }
}

form {
  max-width: 352px;
  
  svg[class*="-icon"] {
    height: 24px;
    width: 24px;
  }
}

.suggester {
  background-color: @oim-antracite;
  color: white;
  padding-left: 8px;
}

.snapshot-timeline {
  padding: 32px 0;

  line,
  polyline,
  circle,
  rect {
    opacity: 1;
    stroke-opacity: 1;
    fill: none;
    stroke: @oim-antracite;
    stroke-miterlimit: 10;
  }

  circle.st2:hover {
    cursor: pointer;
  }

  // arrowheads
  path {
    stroke: none;
    fill: @oim-antracite;
  }
  .st2 {
    fill: #ffffff;
  }
  .st3 {
    fill: #7ac943;
  }
  .st4 {
    font-family: "OpenSans-Light";
  }
  .st5 {
    font-size: 12px;
  }

  text {
    text-anchor: middle;
  }
}
