/*!
 * Football Pool WordPress plugin
 *
 * @copyright Copyright (c) 2026 Antoine Hurkmans
 * @link https://wordpress.org/plugins/football-pool/
 * @license https://plugins.svn.wordpress.org/football-pool/trunk/LICENSE
 */

@import "variables";

.matchinfo.new-layout {
  width: 100%;
  @include flexbox();
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    padding: 5px;
    //margin: 0 0 2px 0;
    //border: 1px solid tomato;
  }

  .match-card {
    @include flexbox();
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    width: calc(50% - 4px);
    margin-right: 4px;
    justify-content: center;
    background-color: #f8f8f8;
  }

  .linked-question {
    @include flexbox();
  }

  .linked-question p.bonus {
    background-color: inherit;
  }

  .match-card-footer, .match-card-header, .matchtype {
    width: 100%; // take all available space
  }

  .match-card, .linked-question {
    margin-bottom: 20px;
  }

  .match-card-header {
    @include flexbox();
    font-size: 75%;
    /*background-color: #f0f0f0;*/

    span {
      @include flex(1);
      justify-content: space-between;
    }
    .matchdate, .time {
      font-size: 1.2em;
    }
    .time {
      text-align: right;
    }
  }

  .match-card-footer {
    @include flexbox();
    //background-color: #f0f0f0;

    div {
      @include flex(1);
      justify-content: flex-end;
      text-align: left;
      align-items: stretch;
      height: $pie-chart-icon-size;
      line-height: $pie-chart-icon-size;
      vertical-align: middle;
      //border: 1px solid tomato;
    }

    .fp-icon {
      text-align: center;

      a {
        -webkit-box-shadow: none;
        box-shadow: none;

        img {
          -webkit-box-shadow: none;
          box-shadow: none;
          max-height: $pie-chart-icon-size;
        }
      }
    }

    .user-score {
      @include flex(3);
      font-size: 75%;
    }
  }

  .matchtype {
    color: #fff;
    background-color: #000;
    font-weight: bolder;
    margin-bottom: 5px;
  }

  .flag, .home, .away, .score {
    width: 50%;
    text-align: center;
    vertical-align: middle;
  }

  div.flag:before {
    vertical-align: middle;
    content: " ";
    display: inline-block;
    height: 100%;
    width: 0;
  }

  div.home, div.away {
    font-weight: bolder;
    font-size: 1.2em;
  }

  .score {
    font-size: 160%;

    input.prediction {
      text-align: center;
      font-size: 120%;
      padding: 2px;
    }

    span.actual-score {
      &:before { content: "("; }
      &:after { content: ")"; }

      font-size: 75%;
    }
  }

  /* jokers */
  .fp-joker, .fp-nojoker {
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
    cursor: pointer;
    width: 36px;
    height: 36px;
  }

  .fp-joker {
    background-image: url(../images/match-table-flex/joker-active.png);
  }

  .fp-nojoker {
    background-image: url(../images/match-table-flex/joker-inactive.png);
  }

  //.fp-joker.saving {
  //    background-image: url(../images/match-table-flex/joker-active-ajax-loader.gif);
  //}
  //
  //.fp-nojoker.saving {
  //    background-image: url(../images/match-table-flex/joker-inactive-ajax-loader.gif);
  //}

  .fp-joker.saving, .fp-nojoker.saving {
    background-image: url(../images/match-table-flex/joker-ajax-loader.gif);
    background-size: 36px 36px;
  }

  .closed .fp-joker, .closed .fp-nojoker, .fp-joker.readonly, .fp-nojoker.readonly {
    cursor: default;
  }
}

table.matchinfo.new-layout {
  display: table;

  td, th {
    padding: .2em .5em;
  }

  .flag, .home, .away, .score {
    width: auto;
    text-align: left;
  }

  .score {
    font-size: 100%;
  }
}

//noinspection SassScssResolvedByNameOnly
@media ( max-width: $mobile-width ) {
  /* match and prediction table */
  div.matchinfo.new-layout {
    .match-card {
      width: 100%;
    }
    .matchtype { font-size: 140%; }
    div.home, div.away { font-size: 125%; }
  }
}