static/scss/brackets.scss
@import "globals";

$BASE-INDEX: 1;

#page-brackets {

  #content {
    @include page;

    padding: 0;
    header {
      @include header;
      position: relative;
    }
  }

  footer {
    position: static;
  }

  .brackets {
    overflow: hidden;
  }

  @media screen and (max-width: $MOBILE-WIDTH) {
    #content {
      width: auto;
      padding: 20px;
    }
  }

}

/**
 * Global bracket card pattern
 */
.bracket-card {
  width: 350px;
  height: 416px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .75);
  background: rgba(255, 255, 255, .8);
  position: relative;
  margin-bottom: 40px;
  margin-right: 40px;
  float: left;

  &:after {
    content: '';
    position: absolute;
    height: 165px;
    bottom: 116px;
    left: 0;
    right: 0;
    z-index: $BASE-INDEX;
    @include gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  }

  h3 {
    font: 36px/1 'Roboto', sans-serif;
    text-shadow: 0 0 2px #000;
    color: #fff;
    margin: 10px;
  }

  .info {
    padding: 20px;

    h3 {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 116px;
      z-index: $BASE-INDEX + 1;
    }

    h4 {
      font: 24px/1 'Roboto', sans-serif;
      margin-bottom: 10px;

      &.winner:after {
        content: 'Winner';
        display: block;
        font: 18px/1 'Roboto', sans-serif;
        color: #666;
      }

    }
  }

  .card-image {
    width: 350px;
    height: 300px;
  }

  .card-entrants {
    width: 350px;
    height: 300px;
    overflow: hidden;
    position: relative;

    .inner {
      position: absolute;
      left: -12px;
      top: -38px;
      width: 450px;

      img {
        width: 125px;
        height: 125px;
        float: left;
      }

    }

    &.has-winner .inner {
      opacity: .5;
    }

    .winner {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      padding: 0 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;

      img {
        display: block;
        box-shadow: 0 0 7px 2px rgba(#000, .7);
        width: 150px;
        margin: 0 auto;
      }

      h3 {
        position: relative;
        text-align: center;

        span {
          position: absolute;
          left: 50%;
          top: calc(100% + 5px);
          transform: translateX(-50%);
          font-size: 18px;
          &:before,
          &:after {
            content: '';
            position: absolute;
            right: calc(100% + 10px);
            top: 50%;
            width: 50px;
            border-top: 1px solid get-color(white);
          }

          &:after {
            right: auto;
            left: calc(100% + 10px);
          }
        }
      }
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url(/static/images/vignette.png);
    }

  }

  .actions {
    position: absolute;
    bottom: 17px;
    right: 20px;

    li {
      float: right;
      padding-left: 20px;
    }

    a {
      color: $dark;
      text-decoration: none;
      font: 24px/1 'Roboto', sans-serif;
      text-transform: uppercase;
    }

  }

  @media screen and (max-width: $MOBILE-WIDTH) {
    width: 100%;
    height: auto;

    .card-image {
      max-width: 100%;
      max-height: 150px;
    }

    .card-entrants {
      width: 100%;
    }

    .actions {
      position: static;
      display: flex;

      li {
        width: 100%;
        float: none;
        padding: 10px;
      }

      a {
        display: block;
        width: 100%;
        text-align: center;
      }
    }

    h4 {
      font-size: 18px;
      text-align: center;
    }

    .info {
      padding: 10px;
    }

    &:after {
      bottom: auto;
      top: 135px;
    }

  }

}

.brackets-pagination {
  text-align: center;
  $arrow-size: 10px;
  .button {
    width: 0;
    overflow: hidden;
    color: transparent !important;
    white-space: nowrap;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      border: $arrow-size solid transparent;
    }

    &--back:before {
      border-right-color: get-color(white);
      left: calc(50% - #{$arrow-size / 2});
    }

    &--next:before {
      border-left-color: get-color(white);
      left: calc(50% + #{$arrow-size / 2});
    }
  }

  &__page {
    @include body;
    @include body--inverse;
    @include body--large;
    padding: 0 spacing(5);
  }
}
