roll20-character-sheets/backbone/source/assets/scss/sections/_condition.scss

// Offset to show just the right side of the aside when collapsed: calc(var(--sidebarWidth) * -1 + 75px)
.ui-dialog .tab-content .charsheet{
  .sidebar-toggle{
    position:absolute;
    top:0;
    --toggleSize:24px;
    display:grid;
    grid-template-areas:'content';
    &:before{
      --endRotate:45deg;
    }
    &:after{
      --endRotate:-45deg;
    }
    &:before,
    &:after{
      content:'';
      grid-area:content;
      display:block;
      width:var(--toggleSize);
      height:var(--toggleSize);
      background: {
        image:var(--conditionIcon);
        repeat: no-repeat;
        position: left center;
        size:contain
      };
      filter: var(--imgInvert);
      transform:rotate(0deg);
    }
    &:not(.fresh){
      &:before,
      &:after{
        animation: {
          duration: var(--sidebarRevealTime);
          iteration-count: 1;
          delay: var(--sidebarRevealTime);
          direction: normal;
          fill-mode:both;
          name: x-rotate-close;
        };
      }
    }
    &:after{
      // opacity:0;
    }
    &.above-top{
      top: -2rem;
      z-index:1000;
    }
    &.sidebar--left{
      left:0;
    }
    &.sidebar--right{
      right:0;
    }
  }
  .sidebar{
    --sidebarWidth: clamp(250px,75vw,500px);
    --hidValue: calc(-1 * var(--sidebarWidth));
    --sidebarRevealTime: 1s;
    background-color:var(--backColor);
    position:fixed;
    width: var(--sidebarWidth);
    top:46px;
    left:0;
    z-index:10000;
    border: var(--displayBorderWidth) solid var(--borderColor);
    border-radius: 0 5px 5px 0;
    box-sizing:border-box;
    padding:var(--grid-gap) var(--big-gap) var(--grid-gap) var(--grid-gap);
    opacity: 1;
    translate:calc(var(--sidebarWidth) * -1 + 26px);
    border-color:transparent;
    &:not(.fresh):not(.active){
      // visibility: hidden;
      animation: {
        duration: var(--sidebarRevealTime);
        iteration-count: 1;
        direction: normal;
        fill-mode:forwards;
        name: slide-out;
      }
    }
    &.active{
      animation: {
        duration: var(--sidebarRevealTime);
        iteration-count: 1;
        direction: normal;
        fill-mode:forwards;
        name: slide-in;
      }
      .sidebar-toggle{
        &:before,
        &:after{
          animation: {
            duration: var(--sidebarRevealTime);
            iteration-count: 1;
            delay: var(--sidebarRevealTime);
            direction: normal;
            fill-mode:both;
            name: x-rotate-open;
          };
        }
        // &:after{
        //   opacity:1;
        //   transition: {
        //     property: rotate,opacity;
        //     duration: var(--sidebarRevealTime),0ms;
        //     timing-function:ease-out;
        //     delay:var(--sidebarRevealTime), calc( var(--sidebarRevealTime) * 2);
        //   }
        // }
      }
    }
  }
  .text-check{
    break-inside: avoid;
    cursor: pointer;
    span{
      padding-inline:var(--half-gap);
    }
  }
  .sidebar--open{
    background: {
      image:var(--conditionIcon);
      repeat: no-repeat;
      position: left center;
      size:contain
    }
    flex: 0 0 auto;
    margin-right:auto;
  }
  .condition-holder{
    position:relative;
    display:grid;
    grid-template-areas: 'content';
    place-items:center;
    > *{
      grid-area:content;
    }
    &:not(:hover):not(:focus):not(:focus-within) .tooltip-display{
      opacity:0;
      visibility:hidden;
      transition: opacity var(--revealTime) ease-in, visibility 0ms var(--revealTime);
    }
  }
  .tooltip-display{
    z-index:1000;
    position:absolute;
    top:100%;
    left:0;
    width: min(50vw,250px);
    padding:var(--half-gap);
    border: var(--displayBorderWidth) solid var(--borderColor);
    border-radius: 0 0 5px 5px;
    transition: opacity var(--revealTime) ease-out;
    background-color:var(--backColor);
    visibility:visible;
  }
  .condition-item{
    gap:var(--half-gap);
    list-style: none;
  }
  .condition-summary{
    flex: 1 1 0;
    margin:0;
  }
  .display-control:not(:checked) + *{
    display:none;
  }
}



#pc-conditions{
  box-sizing: border-box;
  > div{
    gap:var(--grid-gap);
  }
}

@keyframes x-rotate-open{
  0%{
    // opacity:1;
    transform:rotate(0deg);
  }
  100%{
    // opacity:1;
    transform: rotate(var(--endRotate));
  }
}
@keyframes x-rotate-close{
  0%{
    // opacity:1;
    transform: rotate(var(--endRotate));
  }
  100%{
    // opacity:1;
    transform:rotate(0deg);
  }
}
@keyframes slide-in{
  0%{
    translate:calc(var(--sidebarWidth) * -1 + 26px);
    border-color:transparent;
  }
  100%{
    translate: calc(var(--displayBorderWidth) * -1);
    border-color:var(--borderColor);
  }
}
@keyframes slide-out{
  0%{
    translate: calc(var(--displayBorderWidth) * -1);
    border-color:var(--borderColor);
  }
  100%{
    translate:calc(var(--sidebarWidth) * -1 + 26px);
    border-color:transparent;
  }
}