@import '../consts';
div.sportsResults {

  div.info {
    padding: 16px;
    background: linear-gradient(135deg, $blue, darken($blue, 10%));
    border-radius: 8px;
    color: white;
    text-align: center;
    > div.heading {
      font-size: 11px !important;
      color: white !important;
      margin: 0 !important;
      padding: 0 0 8px 0 !important;
    }
    > div.result {
      font-size: 24px;
      margin-bottom: 8px;
    }
    > div.other {
      display: flex;
      > div {
        flex: 1;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        background: white;
        border-radius: 4px;
        color: $blue;
        padding: 8px;
        &:first-child {
          margin-right: 16px;
        }
      }
    }
  }

  div.bigTitle > div.sub > div:last-child {
    color: white;
    text-align: center;
    border-radius: 16px;
    &.red {
      background: red;
    }
    &.green {
      background: green;
    }
    &.orange {
      background: orange;
    }
  }

  div.blockTitle, div.tabs div.links > div.selected, div.tabs div.menu {
    color: white !important;
    &.red {
      background: red !important;
    }
    &.green {
      background: green !important;
    }
    &.orange {
      background: orange !important;
    }
  }

  div.result {
    display: block;
    transition: 200ms;

    div.content {
      padding: 16px 16px 48px 16px;
      margin-bottom: 64px;
      border: 1px solid $bg2;
      border-top: 0;
      margin-top: -5px;
    }

    div.stats {
      background: darken($bg3, 5%);
      margin: 0 0 24px 0;
      border-radius: 0 0 8px 8px;
      div.pie {
        vertical-align: top;
        display: inline-block;
        margin: 16px 24px;
        position: relative;
        height: 50px;
        width: 50px;
        * {
          position: absolute;
          width: inherit;
          height: inherit;
          border-radius: 50%;
        }
        .border {
          border: 4px solid $text;
          background: $text;
          box-sizing: content-box;
          margin: -4px -4px;
        }
        .base {
          display: none;
          background: white;
          box-shadow: 2px 2px 40px rgba(0,0,0,0.2);
        }
        .slice {
          clip: rect(0px,25px,100px,0px);
          transform: rotate(20deg);
          > div {
            clip: rect(0px,25px,100px,0px);
            background: white;
            transform: rotate(120deg);
          }
        }
        &.inv {
          .border {
            background: white;
          }
          .slice {
            transform: rotate(-95deg);
            > div {
              background: $text;
            }
          }
        }
      }
      div:last-child {
        display: inline-block;
        font-size: 24px;
        vertical-align: text-bottom;
        line-height: 76px;
      }
    }


    > div.bigTitle {
      cursor: pointer;
      transition: 200ms;
      &:hover {
        background: darken($bg2, 5%);
      }
    }
    > div.content {
      div.block {
        margin: 0 8px;
        vertical-align: top;
        display: inline-block;
        width: calc(50% - 16px);
        width: -webkit-calc(50% - 16px);
        &.other {
          opacity: 0.6;
          > div.title {
            background: $text;
            font-size: 12px;
            text-transform: inherit;
          }
        }
        div.title {
          background: $blue;
          color: white;
          text-transform: uppercase;
          font-weight: bold;
          text-align: center;
          padding: 4px;
          border-radius: 4px 4px 0 0;
        }
        p {
          padding: 16px;
          font-size: 16px;
          ul {
            margin: 0;
            padding: 0 0 0 16px;
            li {
              margin-bottom: 8px;
            }
          }
        }
      }
    }
    margin-bottom: 24px;
    &:hover {
      > div.header {
        background: $bg;
      }
    }
  }

}

@media (max-width: 768px) {
  div.sportsResults {
    div.result {
      div.bigTitle {
        > div {
          display: block !important;
          text-align: center;
        }

        > div.block {
          > div:last-child {
            font-size: 24px !important;
            margin-bottom: 8px;
          }
        }
      }
      > div.content div.block {
        width: 100% !important;
        margin: 0;
        padding: 0 !important;
      }
    }

  }
}