/* 
  ページ特有のスタイルを記載
  ページ名_page の形式でクラス名を付与する
 */

.static_pages_home_page {
  .logo {
    display: block;
    margin: 1em auto;
  }
}

.tools_stamina_calculations_show_page {
  .form {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 2em;
    gap: 15px 5px;

    .label {
      @media screen and (max-width: 860px) {
        font-size: smaller;
      }
    }

    .number_field {
      width: 100%;
      height: 100%;
    }

    .submit {
      grid-column: 1 / -1;
      padding: 0 2em;
      justify-self: center;
      background-color: var(--color-juo-sena);
      border: var(--color-fujita-kotone) 1px solid;
    }
  }

  .link_to_home {
    margin-top: 1.5em;
  }
}

.tools_dices_show_page {
  .form {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 0.1fr 1fr;
    grid-auto-rows: 2em;
    gap: 15px 5px;

    .number_field {
      width: 100%;
      height: 100%;
    }

    .number_field.right {
      justify-self: end;
      text-align: right;
    }

    .d {
      align-self: center;
      justify-self: center;
    }

    .submit {
      grid-column: 1 / -1;
      padding: 0 2em;
      justify-self: center;
      background-color: var(--color-shiun-sumika);
      border: var(--color-katsuragi-lilja) 1px solid;
    }
  }

  .link_to_home {
    margin-top: 1.5em;
  }
}

.sessions_new_page {
  .form {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 2em;
    gap: 15px 5px;

    .text_field {
      width: 100%;
      height: 100%;
    }

    .submit {
      grid-column: 1 / -1;
      padding: 0 2em;
      justify-self: center;
      background-color: var(--color-shinosawa-hiro);
      border: var(--color-tsukimura-temari) 1px solid;
    }
  }
}

.controls_birthday_characters_index_page {
  .link_to_new {
    margin-top: 1em;
  }

  .characters_table {
    border-collapse: collapse;
    margin-top: 2em;

    th,
    td {
      border-top: 1px solid;
      border-bottom: 1px solid;
      padding: 0.5em 2em;
    }

    .delete_button {
      background-color: var(--color-himesaki-rinami);
      border: var(--color-hanami-saki) 1px solid;
      padding: 0.3em 1em;
      cursor: pointer;
    }
  }
}

.controls_birthday_characters_new_page {
  .errors {
    margin-top: 1.5em;
  }

  .form {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 12em minmax(0, 24em);
    grid-auto-rows: minmax(2.5em, auto);
    gap: 15px 10px;
    align-items: center;

    @media screen and (max-width: 860px) {
      grid-template-columns: 1fr;
    }

    .label {
      @media screen and (max-width: 860px) {
        margin-top: 0.75em;
      }
    }

    .text_field,
    .date_field,
    .color_field,
    .select_field {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .color_field {
      min-height: 2.5em;
      padding: 0.2em;
    }

    .submit {
      grid-column: 1 / -1;
      padding: 0 2em;
      justify-self: center;
      background-color: var(--color-katsuragi-lilja);
      border: var(--color-hanami-saki) 1px solid;
    }
  }

  .link_to_index {
    margin-top: 1.5em;
  }
}

.controls_birthday_characters_edit_page {
  .errors {
    margin-top: 1.5em;
  }

  .form {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 12em minmax(0, 24em);
    grid-auto-rows: minmax(2.5em, auto);
    gap: 15px 10px;
    align-items: center;

    @media screen and (max-width: 860px) {
      grid-template-columns: 1fr;
    }

    .label {
      @media screen and (max-width: 860px) {
        margin-top: 0.75em;
      }
    }

    .text_field,
    .date_field,
    .color_field,
    .select_field {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .color_field {
      min-height: 2.5em;
      padding: 0.2em;
    }

    .submit {
      grid-column: 1 / -1;
      padding: 0 2em;
      justify-self: center;
      background-color: var(--color-katsuragi-lilja);
      border: var(--color-hanami-saki) 1px solid;
    }
  }

  .link_to_index {
    margin-top: 1.5em;
  }
}