@import "../variables";
@import "../utilities";

.system-vermine2047 .vermine2047.actor.creature {
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 10px;
    max-height: 110px;
  }

  .header-fields { flex: 1; }
  .resources { margin-bottom: 10px; }

  .resource {
    .card-style();
  }

  .resource-label {
    font-weight: bold;
    margin-right: 8px;
    min-width: 60px;
    font-size: @font-size-12;
  }

  .resource-content {
    display: flex;
    align-items: center;

    select {
      margin-right: 8px;
      min-width: 80px;
    }
  }

  .charname {
    margin: 0;

    input {
      width: 100%;
      font-size: @font-size-18;
      font-weight: bold;
      text-align: center;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat {
    .card-style();
    display: flex;
    justify-content: space-between;

    label { font-weight: bold; }
    span {
      font-weight: bold;
      color: @theme-color-light;
    }
  }

  .mdb {
    &:not(.row) {
      .card-style();
    }

    h4:first-child {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-14;
      margin-top: 0;
      border-bottom: 1px solid @color-border-dark-3;
      padding-bottom: 5px;
      text-align: center;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
    }

    ul.unstyled {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      padding: 3px 0;
      border-bottom: 1px solid @color-border-dark-3;

      &:last-child { border-bottom: none; }
    }
  }

  input[type="text"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 8px;
  }

  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    label {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
    }
  }

  .row.mdb {
    display: flex;
    align-items: center;
    gap: 8px;
  }

}