@import 'variables';

.flex-row-always {
  display: flex;
  flex-direction: row;

  & > * {
    margin: 0 0.5em;
  }

  .primary {
    flex: 1;
  }
}

.flex-row {
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $screen-md) {
    flex-direction: row;
    & > * {
      margin: 0 0.5em !important;
    }

    & > :first-child {
      margin-left: 0 !important;
    }

    & > :last-child {
      margin-right: 0 !important;
    }
  }

  & > * {
    margin: 0.5em 0;
  }

  .primary {
    flex: 1;
  }
}

.jc-sb {
  justify-content: space-between;
}

.raw-markdown {
  font-family: 'Roboto Mono', monospace;
  white-space: pre-wrap;
}

.table-borderless,
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
  border: none;
}

pre.unformatted {
  padding: unset;
  margin: unset;
  font-size: unset;
  line-height: unset;
  color: unset;
  background: unset;
  border: unset;
}

.stat-panel {
  flex: 1;
}

.stat-panel-heading {
  margin-top: 0;
  font-variant: small-caps;
  color: $muted-text;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 2.0em;
}

.badge.is-tag.is-outlined {
  border: 1px solid #001db1;

  &.is-red {
    border: 1px solid #b3001e;
  }
}

.badge.is-tag.is-small {
  padding: 2px 4px;
  line-height: 1;
}

.badge.is-tag.is-large {
  font-size: 22px;
}

.error-shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(-5px); }
  10% { transform: translate(5px); }
  20% { transform: translate(-5px); }
  30% { transform: translate(5px); }
  40% { transform: translate(-5px); }
  50% { transform: translate(5px); }
  60% { transform: translate(-5px); }
  70% { transform: translate(5px); }
  80% { transform: translate(-5px); }
  90% { transform: translate(5px); }
  100% { transform: translate(-5px); }
}

.diff {
  .raw-markdown {
    white-space: unset;
  }

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

    li {
      min-height: 20px;

      del, ins {
        text-decoration: none;
      }

      del > strong {
        text-decoration: line-through;
      }

      ins > strong {
        text-decoration: underline;
      }
    }
  }
}

.__mobile-only {
  @media screen and (min-width: $screen-sm) {
    display: none;
  }
}

.__desktop-only {
  @media screen and (max-width: $screen-sm) {
    display: none;
  }
}