@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');
@import "../node_modules/bootstrap/scss/bootstrap";

body {
  background-color: #FAF9F6;
}

.App {
  --dartball-blue: #20438cff;
  --dartball-green: #118b48ff;
  --dartball-black: #343a39ff;
  --dartball-white: #f6fafdff;
  --dartball-red: #c63d4eff;
  --dartball-gray: #b2aba8ff;
  --dartball-orange: #ed5a2eff;

  font-family: 'Oswald';
  font-size: 18px;
  text-align: center;
  section, div.gameState {
    /* padding: 0.5rem; */
    margin: 0.5rem;
    border: black solid;
    border-radius: 10px;
    background-color: white;
    overflow: hidden;
    header {
      font-size: 1.8rem;
      font-weight: bolder;
      text-transform: uppercase;
      border-bottom: black solid;
      background-color: lightblue;
      min-height: 1rem;
    }
  }

  .gameLog {
    font-family: monospace;
    font-size: .8rem;
    line-height: 1rem;
    @extend .bg-light; 
  }

  table {
    @extend .table;
    background-color: auto;
    .at-bat {
      @extend .table-active;
    }
  }

  section.play {
    background-color: var(--dartball-green);
  }

  .base {
    @extend .m-1;
    border: black solid;
    padding: 0.2rem;
    width: 1rem;
    height: 1rem;
    &.occupied {
      color: white;
      background-color: red;
  }}

  button.play, div.dropdown {
    @extend .btn;
    @extend .btn-lg;
    @extend .btn-light;
    @extend .m-2;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dartball-black);
    &.strike{
      background-color: var(--dartball-gray);
      border: solid var(--dartball-gray);
    }
    &.out{
      background-color: var(--dartball-orange);
      border: solid var(--dartball-orange);
    }
    &.foul{
      background-color: var(--dartball-green);
      border: solid var(--dartball-black);
    }
    &.ball{
      background-color: var(--dartball-blue);
      border: solid var(--dartball-blue);
      color: white
    }
    &.hit{
      @extend .btn-light;
      background-color: var(--dartball-white);
      border: solid var(--dartball-white);
    }
    border: none;
  }
  .lineups.nav {
    .nav-item button[role=tab][aria-selected=true]{
      font-weight: 900;
      &:before, &:after{
        content: "*";
      }
  }
  }
}