@charset "utf-8";

// Customization

// You can easily customize Bulma with your own variables.
// Just uncomment the following block to see the result.

/*
// 1. Import the initial variables
@import '../../node_modules/bulma/sass/utilities/initial-variables';

// 2. Set your own initial variables
// Update the blue shade, used for links
$blue: #06bcef;
// Add pink and its invert
$pink: #ff8080;
$pink-invert: #fff;
// Update the sans-serif font family
$family-sans-serif: 'Helvetica', 'Arial', sans-serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;

// 4. Import the rest of Bulma
*/

@import '../../node_modules/bulma/bulma';

$map1-bg: #800126;
$map2-cat0: #f4f4f4;
$map2-cat1: #74a3eb;
$map2-cat2: #001d93;
$map2-cat3: #01000f;

@mixin tube-colors($base-color) {
  .right {
    fill: $base-color;
  }
  .left {
    fill: darken($base-color, 4%);
  }
}

.cocktail {
  .annotation {
    path.connector,
    path.subject,
    path.note-line {
      stroke: #26a69a;
    }
    .annotation-note text {
      fill: #26a69a;
    }
  }
}

.legend rect {
  stroke: #000;
  stroke-width: 0.5px;
}

.limits {
  .annotation {
    path.connector,
    path.subject,
    path.note-line {
      stroke: #eb2e6c;
    }
    .annotation-note {
      text {
        fill: #eb2e6c;
      }
    }
  }
  .legend rect {
    &.cat-0 {
      fill: $map2-cat0;
    }
    &.cat-1 {
      fill: $map2-cat1;
    }
    &.cat-2 {
      fill: $map2-cat2;
    }
    &.cat-3 {
      fill: $map2-cat3;
    }
  }
}

#page-title {
  background-color: $map1-bg;

  &.cocktail {
    background-color: $map1-bg;
  }
  &.limits {
    background-color: $map2-cat3;
  }
}

#navbarMaps {
  margin-top: 0.5em;
  margin-bottom: 1em;
  #nav-item-cocktail:hover,
  #nav-item-cocktail.is-active {
    background-color: $map1-bg;
    color: $light;
  }
  #nav-item-limits:hover,
  #nav-item-limits.is-active {
    background-color: $map2-cat3;
    color: $light;
  }
}

html {
  background-color: rgba(255, 255, 255, 0.75);
}

#app {
  padding-top: 0;
}

#search {
  margin-top: 2.5em;
  .modal {
    justify-content: start;
    padding-top: 6em;
    @media screen and (max-width: $tablet - 1px) {
      & {
        padding-top: 0em;
      }
    }
    .modal-content {
      max-height: none;
      padding: 0.5em 1em;
      border-radius: 5px;
      .field {
        margin-bottom: 0;
      }
      #results li a {
        display: block;
        padding: 1em;
        font-weight: bold;
        color: $dark;
        transition: all 0.2s ease;
        p {
          font-size: 0.8rem;
          font-weight: normal;
        }
        &:hover,
        &:focus {
          color: $black;
          background-color: #f2f2f2;
          padding-left: 1.2em;
          transition: all 0.2s linear;
        }
      }
    }
    .modal-close {
      top: 3px;
      background-color: rgba(10, 10, 10, 0.2);
    }
  }
}

#breadcrumb {
  margin-bottom: 1rem;
}

#details {
  #details-main {
    min-height: 150px;
    p.brazil {
      margin-top: 3rem;
    }
    header#idCard {
      h2,
      h3 {
        text-align: center;
        text-transform: uppercase;
      }
      h3 {
        color: $grey-dark;
        font-size: 1em;
        font-weight: normal;
        margin-top: 0;
      }
    }
    nav.level {
      margin-top: 2rem;
      .level-item {
        display: block;
      }
    }
    .tubes {
      margin-bottom: 2em;
      a text {
        fill: #3273dc;
      }
      a:hover text,
      a:active text {
        fill: #363636;
      }
      svg.tube {
        margin: 10px 5px;
        font-size: 1.6rem;
        &.hhce {
          @include tube-colors(#f03b20);
        }
        &.no-hhce {
          @include tube-colors(#feb24c);
        }
        &.cat-1 {
          @include tube-colors($map2-cat1);
        }
        &.cat-2 {
          @include tube-colors($map2-cat2);
        }
        &.cat-3 {
          @include tube-colors($map2-cat3);
        }
      }
    }
  }
  #details-footer {
    #to-other-views {
    }
    #to-article {
    }
    #download,
    #source {
      margin-top: 4rem;
      font-size: 0.7rem;
    }
  }
}

#map {
  position: relative;
  min-height: 150px;
  canvas {
    width: 100%;
  }
  svg {
    width: 100%;
    .overlay path {
      fill: #ffffff01;
    }
    .annotation {
      .annotation-note {
        .annotation-note-bg {
          fill: white;
          fill-opacity: 1;
        }
        text {
          font-size: 1.25rem;
        }
      }
    }
  }
}

#footer-lang {
  margin-bottom: 1em;
  ul,
  li {
    display: inline-block;
  }
  li + li:before {
    content: ' · ';
    padding: 0;
    position: relative;
  }
}

// See https://github.com/jgthms/bulma/issues/847#issuecomment-314110630
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
  &:after {
    @include loader;
    position: absolute;
    top: calc(50% - 2.5em);
    left: calc(50% - 2.5em);
    width: 5em;
    height: 5em;
    border-width: 0.25em;
  }
}