@import '~app/styles/init';

.statistics {
  color: $content-text;

  .statistics-item-container {
    position: relative;
    padding: 0 15px;
    float: left;
    box-sizing: border-box;

    .card {
      height: 115px;

      .card-body {
        padding: 15px;
      }
    }
  }

  .statistics-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1em;

    .description {
      display: inline-block;
      font-size: 18px;
      opacity: 0.9;
      
      .description-stats {
        padding-top: .5em;
        font-size: 1.8rem;
      }
    }

    .icon {
      font-size: 3.8em;
    }
  }
}

@media screen and (min-width: 1620px) {
  .row.shift-up {
    > * {
      margin-top: -573px;
    }
  }
}

@media screen and (max-width: 1620px) {
  .card.feed-panel.large-card {
    height: 824px;
  }
}

.ga-card {
  min-height: 400px;

  .ga-box {
    position: relative;

    .toolbar {
      display: none;
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
  
      .btn {
        margin-right: 1rem;
      }
  
      .selector {
        flex-grow: 1;
        display: flex;

        &.hide {
          opacity: 0;
          visibility: hidden;
          transition: visibility opacity .2s;
        }

        &.show {
          opacity: 1;
          visibility: visible;
          transition: visibility opacity .2s;
        }
  
        table {
          margin-right: 1rem;
  
          tr {
            td {
              &:last-child * {
                display: block;
                text-align: left;
              }
            }
          }
        }
      }
    }
  
    .pie-charts {
      display: flex;
      justify-content: space-between;
      min-height: 200px;
  
      .chart {
        width: calc(100% - (3rem) / 4);

        &.country,
        &.city,
        &.browser {
          margin-right: 1rem;
        }
      }
    }
  
    .timeline {
      min-height: 200px;
    }
  }
}
