@use 'mixinsandplaceholders';
@use 'systemVariables';
@use 'placeholders/systemPlaceholders';

.sheet-rolltemplate-backbone{
  @extend %systemVariables;
  @extend %defaultStyles;
  --backColor:#FCF5E5;
  --borderImgRadiusFit:20px;
  margin-right:-16px;
  margin-left:-45px;
  margin-bottom:-7px;
  padding:var(--grid-gap);
  &:not(:first-child){
    margin-top:var(--grid-gap);
  }
  
  .sheet-image-border{
    position: absolute;
    inset: 0;
    border: var(--maskSize) solid;
    border-image-source: var(--borderImageSource);
    border-image-slice: var(--borderImageSlice);
    border-image-width: var(--maskSize);
    border-image-repeat: round;
    pointer-events: none;
    z-index:-1;
  }
  .sheet-template{
    position:relative;
    padding:4px;
    isolation:isolate;
    filter: drop-shadow(var(--shadowSize) 0 var(--shadowBlur) var(--shadowColor)) drop-shadow(calc(var(--shadowSize) * -1) 0 var(--shadowBlur) var(--shadowColor)) drop-shadow(0 var(--shadowSize) var(--shadowBlur) var(--shadowColor)) drop-shadow(0 calc(var(--shadowSize) * -1) var(--shadowBlur) var(--shadowColor)) drop-shadow(var(--shadowSize) 0 calc(var(--shadowBlur) * 1.5 ) var(--shadowColor2)) drop-shadow(calc(var(--shadowSize) * -1) 0 calc(var(--shadowBlur) * 1.5 ) var(--shadowColor2)) drop-shadow(0 var(--shadowSize) calc(var(--shadowBlur) * 1.5 ) var(--shadowColor2)) drop-shadow(0 calc(var(--shadowSize) * -1) calc(var(--shadowBlur) * 1.5 ) var(--shadowColor2));
    > :nth-child(2){
      border-top-left-radius: var(--borderImgRadiusFit);
      border-top-right-radius: var(--borderImgRadiusFit);
    }
    > :last-child{
      border-bottom-left-radius: var(--borderImgRadiusFit);
      border-bottom-right-radius: var(--borderImgRadiusFit);
    }
    p,span{
      font-size:1.3rem;
    }
    p{
      overflow-y:auto;
      max-height:30rem;
      margin:0;
    }
    a{
      background-color:transparent;
      border:none;
      padding:0;
      color:var(--fontColor);
      font-weight:700;
      &[href^='!'],
      &[href^='~']{
        display:inline-grid;
        grid-template-columns:10px auto;
        grid-template-areas: 'icon text';
        &:before{
          content:'';
          background:{
            image: url('https://s3.amazonaws.com/files.d20.io/images/305391097/UIK_ZAJSwqtkuDg5I2g_LQ/original.png?16636241805');
            repeat:no-repeat;
            size:contain;
            position:center;
          }
          
        }
      }
    }
  }
  @mixin pureResult{
    position:relative;
    display:flex;
    align-items:center;
    &:before{
      position:absolute;
      left:-24px;
    }
  }
  @mixin pureSuccess{
    &:before{
      content:'';
      display:block;
      background-image:var(--successCircle);
      background-repeat:no-repeat;
      background-size:contain;
      width: 24px;
      height:24px;
    }
  }
  @mixin pureFail{
    &:before{
      content:'';
      display:block;
      background-image:var(--failCircle);
      background-repeat:no-repeat;
      background-size:contain;
      width: 24px;
      height:24px;
    }
  }
  .sheet-content{
    padding: var(--big-gap);
    .inlinerollresult{
      @extend %h3-style;
      background-color: transparent;
      border:0px solid transparent;
      font-weight:700;
      &.fullcrit{
        color:green;
      }
      &.fullfail{
        color:red;
      }
      &.importantroll{
        color:blue;
      }
    }
    .sheet-pure-success{
      + .inlinerollresult{
        color:var(--fontColor) !important;
        @include pureResult;
        &.fullcrit{
          color:var(--fontColor);
          @include pureSuccess
        }
        &.fullfail{
          color:var(--fontColor);
          @include pureFail;
        }
      }
    }
    .sheet-result .inlinerollresult{
      @extend %h1;
      font-size:3rem;
    }
    .sheet-result--no-crit{
      .inlinerollresult{
        color:var(--fontColor);
      }
    }
    .sheet-result--is-fumble{
      .inlinerollresult{
        @include pureResult;
        @include pureFail;
      }
    }
    .sheet-result--is-crit{
      .inlinerollresult{
        @include pureResult;
        @include pureSuccess;
      }
    }
  }
  .sheet-description{
    width:100%;
  }
}