@use "../atoms/colours" as colour;

.dsa41.dialog.resource {

  section.steps {
      overflow: auto;
      flex: 1;
      display: grid;
      grid-template-columns: repeat(5, 1fr);

      .step {
        display: inline-block;
        border: 1px solid black;
        width: 64px;
        height: 48px;
        line-height: 48px;
        vertical-align: middle;
        text-align: center;
        justify-self: center;
        font-weight: bold;
        cursor: pointer;

        margin: 4px;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5),
        2px 2px inset rgba(0, 0, 0, 0.2);

        &.reducing {
          background-color: colour.$harm-fill-color;
          border-color: colour.$harm-border-color;
          background-blend-mode: hue;
        }

        &.increasing {
          background-color: colour.$help-fill-color;
          border-color: colour.$help-border-color;
          background-blend-mode: hue;
        }
      }

  }

}