@import 'colors';
@import 'fonts';
@import 'tip';
@import 'form';
@import 'error';
@import 'header';
@import url(https://www.thoughtworks.com/css/k8s_production/screen.css);

body {
  font: 18px 'Open Sans';
  -webkit-font-smoothing: antialiased;
  margin: 0 0 64px;
}

@media print {

  body, article {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 2cm;
  }

  a:after {
    content: " <" attr(href) "> ";
    font-size: 0.8em;
    font-weight: normal;
  }

  #radar-plot {
    display: none;
  }

  .quadrant-table {
    .quadrant-table__name {
      display: block;
      font-size: 36pt;
      padding: 0 10px;
      margin-bottom: 20px;
    }

    &.first .quadrant-table__name {
      color: $green;
    }

    &.second .quadrant-table__name {
      color: $blue;
    }

    &.third .quadrant-table__name {
      color: $orange;
    }

    &.fourth .quadrant-table__name {
      color: $violet;
    }
  }

  .quadrant-table {
    page-break-after: always;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      page-break-inside: avoid;
    }


    h3 {

      page-break-before: always;
      padding: 0 10px;
      text-transform: uppercase;
      font-size: 18pt;
      font-weight: bold;

    }

    h2 + h3 {
      page-break-before: avoid;
    }
  }

  .blip-list-item {
    font-weight: bold;
  }

  .blip-item-description {
    padding: 0 15px;
  }

  header {
    text-align: left;

    .radar-title .radar-title__text {
      font-size: 40px;
      width: 100%;
      padding: 10px;
      display: block;
    }

    .radar-title .radar-title__logo {
      display: block;
      width: auto;

      a {
        padding: 40px 10px 0;
        display: block;

        &::after {
          display: none;
        }
      }

      img {
        max-width: 150px;
      }
    }

    .buttons-group {
      display: none;
    }

    .home-link {
      display: none;

      &.selected {
        display: none;
      }
    }

    #alternative-buttons {
      display: none;
    }

    .print-radar {
      display: none;
    }
  }

  #footer {
    display: none;
  }

  .error-container {
    display: none;
  }

}


@media screen {

  #radar {
    width: 90%;
    margin: 0 auto;
    position: relative;

    svg#radar-plot {
      margin: 0 auto;
      transition: all 1s ease;
      position: absolute;
      left: 0;
      right: 0;

      .legend {
        visibility: hidden;
        transition: visibility 1s ease 1s;
        color: $black;
      }

      path {
        &.ring-arc-3 {
          stroke: none;
          fill: $grey-light;
        }

        &.ring-arc-2 {
          stroke: none;
          fill: $grey;
        }

        &.ring-arc-1 {
          stroke: none;
          fill: $grey-dark;
        }

        &.ring-arc-0 {
          stroke: none;
          fill: $grey-darkest;
        }
      }

      .blip-link {
        text-decoration: none;
        cursor: pointer;
      }

      .quadrant-group {
        cursor: pointer;
      }

      circle, polygon, path {
        &.first {
          fill: $green;
          stroke: none;
        }

        &.second {
          fill: $blue;
          stroke: none;
        }

        &.third {
          fill: $orange;
          stroke: none;
        }

        &.fourth {
          fill: $violet;
          stroke: none;
        }
      }

      line {
        stroke: white;
      }

      text {
        &.blip-text {
          font-size: 9px;
          font-style: italic;
          fill: $white;
        }

        &.line-text {
          font-weight: bold;
          text-transform: uppercase;
          fill: $black;
          font-size: 10px;
        }
      }
    }

    div.quadrant-table {

      .quadrant-table__name {
        display: none;
      }

      max-height: 0;
      max-width: 0;
      position: absolute;
      overflow: hidden;

      transition: max-height 0.5s ease 1s;

      h3 {
        text-transform: uppercase;
        font-size: $baseFont;
        margin: 0;
        font-weight: bold;
      }

      &.first {
        &.selected {
          float: right;
        }
      }

      &.second {
        &.selected {
          float: left;
        }
      }

      &.third {
        &.selected {
          float: left;
        }
      }

      &.fourth {
        &.selected {
          float: right;
        }
      }

      &.selected {
        position: relative;
        max-height: 10000px;
        max-width: 40%;
      }

      ul {
        padding: 0;
        margin-left: 0;

        li {
          list-style-type: none;
          padding-left: 0;

          .blip-list-item {
            padding: 2px 5px;
            border-radius: 2px;
            cursor: pointer;
            font-size: $baseFont;
            font-weight: 400;

            &.highlight {
              color: white;
              background-color: rgba(0, 0, 0, 0.8);
            }
          }

          .blip-item-description {
            max-height: 0;
            overflow: hidden;
            width: 300px;

            p {
              margin: 0;
              border-top: 1px solid rgb(119, 119, 119);
              border-bottom: 1px solid rgb(119, 119, 119);
              padding: 20px;
              color: $grey-text;
              font-weight: 100;
              font-size: 14px;
            }

            transition: max-height 0.2s ease;

            &.expanded {
              transition: max-height 0.5s ease 0.2s;
              max-height: 1000px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 570px) {
  #radar {
    width: 98%;
    margin-left:2%;

    svg#radar-plot{
      text.line-text {
          font-size: 7px;
      }
    }
  }

  header {
    margin-right: 0 ;
    .button {
      padding: 4px 2px;
    }
  }

 
}