//Sets the bio/charsheet/a&a tab container to be sticky and float at the top
@use '../placeholders/borderPlaceholders';
ul.nav-tabs.nav{
  position:sticky;
  top:0;
  background-color:var(--backColor);
  z-index:9999;
  margin-bottom:0px;
}
.ui-dialog .tab-content .charsheet .tabs > nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:end;
  align-items:start;
  gap:var(--half-gap);
  position:sticky;
  top:44px;
  margin-bottom:10px;
  padding-inline:10px;
  padding-block:var(--half-gap);
  background-color:var(--backColor);
  z-index:1000;
  transition: {
    property:background-color;
    duration:var(--revealTime);
  };
  .no-list{
    list-style:none;
    margin:0;
  }
  button{
    color:var(--fontColor);
  }
  .tabs__button{
    font-size:1.5rem;
    @extend %inputHighlight;
    border-color:transparent;
    padding-inline:0;
    transition: {
      property: border-color, color, background-color, padding-inline;
      duration: var(--revealTime);
      timing-function: ease;
    }
    &:not(.pictos){
      font-family:var(--topHeaderFont);
      line-height:1;
    }
    &.k-active-button{
      color:var(--backColor);
      background-color: var(--borderColor);
      border-color:var(--borderColor);
      padding-inline:var(--tiny-gap);
    }
    &.inactive{
      display:none !important;
    }
  }
  .roll-options,
  .basic-moves{
    display:flex;
    flex-wrap:wrap;
    grid-gap:var(--half-gap);
  }
  .basic-moves{
    justify-content: space-between;
  }
  .roll-options{
    grid-column:1;
    justify-content: center;
  }
}