.roll-dialog {
  font-family: CaslonAntique;
  display: grid;
  grid-template-areas:
    "header header     header     header     header     header     header"
    "action action     action     action     action     action     action"
    "type   separation separation separation separation separation separation"
    "type   carac      carac      carac      comp       comp       resume"
    "type   choix      choix      choix      choix      choix      conditions"
    "type   resolution resolution resolution resolution resolution conditions"
    "type   chances    chances    chances    chances    chances    buttons"
    "footer footer     footer     footer     footer     footer     footer";
  grid-template-columns: 2rem 1rem 1fr 1fr 2fr 2fr 3fr;
  gap: 0.2rem;

  roll-header { grid-area: header; }
  roll-line  { grid-area: separation; }
  roll-action { grid-area: action; }
  roll-carac { grid-area: carac; }
  roll-comp { grid-area: comp; }
  
  roll-choix { grid-area: choix; }
  
  roll-table { grid-area: resolution; }
  roll-conditions { grid-area: conditions; }
  roll-chances { grid-area: chances; }
  roll-resume { grid-area: resume; }
  roll-buttons  { grid-area: buttons; }
  
  roll-type {
    grid-area: type;
    display: flex;
    flex-direction: column;
  }
  roll-conditions roll-section[name="rollmode"],
  roll-type {
    button[data-checked="true"] {
      background-color: var(--color-text-selection-bg);
      color: var(--color-controls);
      i { filter: invert(0.8); }
      img { filter: invert(0.2); }
    }
    button {
      height: 1.8rem;
      width: 1.8rem;
      gap: 0.5rem;
      padding: 0.2rem;
      background-color: var(--button-background-color);
      color: var(--color-controls);
      i { filter: invert(0.2); }
      img { filter: invert(0.8); }
    }
  }
  
  :is(roll-carac, roll-comp) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }
  
  roll-section,
  roll-section div {
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
    margin: 0 0.2rem;
  }
  
  roll-resume {
    display: flex;
    flex-direction: row;
    img.button-effect-img {
      filter: invert(0.8);
    }
  }

  roll-choix roll-section {
    display: grid;
    grid-template-areas:
      "selection selection"
      "img roll-part";
    grid-template-columns: 3.2rem 1fr;
    gap: 0.2rem;
    align-items: start;

    
    subline {
      grid-area: selection;
      display: flex;
      flex-direction: row;
      margin: 0.1rem 0;
      .warning {
        border-radius: 0.5rem;
        background: var(--gradient-warning);
      }
    }

    roll-part-img {
      display: flex;
      flex-direction: column;
      grid-area: img;
      img {
        border: 0;
        padding: 1px;
        max-height: 3rem;
        max-width: 3rem;
        object-fit: contain;
        height: 100%;
      }
    }
    roll-part-detail {
      grid-area: roll-part;
      display: flex;
      flex-direction: column;
      align-items: normal;
      
      subline {
        display: flex;
        flex-direction: row;
        margin: 0.1rem 0;
        div.poesie-extrait{
          display: flex;
          flex-direction: column;
          align-items: normal;
        }
        span.status-surprise{
          display: flex;
          flex-direction: row;
          flex-flow: wrap;
          img {
            filter: invert(0.8);
          }
        }
        label {
          align-content: center;
        }
      }
    }
  }

  roll-section selected-numeric-value {
    display: flow;
    width: 2.5rem;
    text-align: right;
    margin: 0 0.2rem;
    padding: 0 0.2rem;
    border: 1px solid ;
    border-radius: 0.2rem ;
    background: hsla(0, 0%, 0%, 0.2);
    height: 1.5rem;
    background: hsla(0, 0%, 0%, 0.2);
  }

  roll-action {
    flex-basis: content;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 0.2rem solid;
    font-size: 1.2rem;
    font-weight: bold;
    
    roll-section {
      display: flex;
      flex-direction: row;
      align-items: center;

      img.action-img {
        float: left;
      }
      img {
        max-width: 3rem;
        max-height: 3rem;
        margin: 0 1rem;
        padding: 0;
      }
    }
  }

  roll-conditions {
    display: flex;
    flex-direction: column;
  }
  :is(roll-action, roll-carac, roll-comp) roll-section {
    flex-basis: content;
  }  

  :is(roll-choix, roll-conditions, roll-carac, roll-comp) {
    select {
      max-height: 1.6rem;
      margin: 0 0.2rem;
      padding: 0 0.2rem;
    }
    input[type="number"] {
      max-height: 1.6rem;
      max-width: 2.5rem;
      margin: 0 0.2rem;
      padding: 0 0.2rem;
    }
    img {
          max-width: 1.8rem;
          max-height: 1.8rem;
          margin: 0 0.2rem;
          padding: 0;
    }
    img.button-effect-img {
          max-width: 1rem;
          max-height: 1rem;
          margin: 0 0.1rem;
    }
  }

  roll-carac select[name="select-carac"] {
    min-width: 6.5rem;
    max-width: 8rem;
  }
  roll-comp select[name="select-comp"] {
    min-width: 8rem;
    max-width: 10rem;
    margin-left: 1.5rem;
  }

  roll-conditions roll-section[name="coeur"] select[name="coeur"]  {
    max-width: 4rem;
  }

  roll-conditions roll-section[name="tricher"] img {
    /* image de d100 */
    max-width: 2.5rem;
    max-height: 2.5rem;
    gap: 0;
    margin: 0;
    padding: 0;
    filter: invert(0.8);
  }

  roll-buttons { 
    display: flex;
    flex-direction: row-reverse;
  }

  roll-table {
    table tr :is(th, td) {
        padding: 0.1rem;
        width: 1.5rem;
        text-align: center;
    }
  }

}