@import './common/sass/variables';

.character-mode {
  border: 4px solid $red;
}

.center {
  text-align: center;
}

.close-changelog {
  border: 2px solid $dark-gray;
  cursor: pointer;
  padding: 0;
  margin: 0.5em 0 0 0;
  text-align: center;

  &:hover {
    background: #ccc;
    transition: .5s ease;
  }
}

input.changelog:checked ~ div.changelog {
  display: none;
}

.modes {
  display: flex;
  justify-content: space-evenly;
}

h2.mode-title {
  text-align: center;
}

div.mode-title {
  margin-bottom: 2em;
  @include std-font($text-font);
}

label.mode {
  text-align: center;
  margin: 0.5em;
  padding: 0;
  cursor: pointer;
  box-shadow: 1px 1px 19px 6px rgba(0,0,0,0.15);
  opacity: 1;
  z-index: 5;
  width: auto;

  &:hover {
    h4 {
      color: white;
      background-color: $red;
      transition: .5s ease;
    }
    .mode-image {
      opacity: 0.7;
      transition: .5s ease;
    }
  }
}

input[type=radio].character-mode:checked ~ div.character-mode,
input[type=radio].hub-mode:checked ~ div.hub-mode {
  display: block;
}

input[type=checkbox].modes-show:checked ~ div.modes-show {
  display: block;
}

div.mode {
  display: flex;
  justify-content: center;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0;
}

.mode-image {
  display: flex;
}

input[type=radio].acts:checked ~ div.acts,
input[type=radio].encounter-report:checked ~ div.encounter-report {
  display: inline-grid;
  @include show-hide();
}

.sub-header {
  margin-top: 1em;
  border-bottom: 3px solid $dark-gray;
}

.subtitle {
  font-size: 0.8em;
  @include std-font($mono-font);
  text-transform: uppercase;
}

.stat-block {

  label {
    // display: block;
    padding: 0 1em;
    font-size: 1em;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: normal;
    // width: fit-content;
    // width: -moz-fit-content;
  }
}