@use "../atoms/colours";
@use "../atoms/numbers";
@use "sass:color";

.dsa41.sheet {
  .player-action {

    display: inline-block;
    width: 120px;
    height: 80px;
    float: left;
    margin: 0 8px 8px 0;
    position: relative;

    border: 1px solid #333;
    color: colours.$default-action-color;
    background: url('../../../ui/parchment.jpg');
    background-size: 128px 100%;
    border-radius: 4px;
    box-shadow: numbers.$pill-box-inset numbers.$pill-box-inset numbers.$pill-box-blur-radius colours.$pill-box-shadow;

    span {
      position: relative;
      z-index: 2;
    }

    &::after { /* for tinting the texture */
      content: "";
      position: absolute;
      background-color: colours.$default-action;
      background-blend-mode: multiply;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    &.special-ability::after {
      background-color: colours.$special-action;
      color: colours.$special-action-color;

    }

  }
}
