@use 'button';

@mixin repButton{
  opacity:0;
  transition: {
    property:opacity,background-color;
    duration: var(--revealTime);
  };
  @extend %text-button;
  font-family:pictos;
}
%fieldsetStyling{
  .repitem{
    > input:not([type='checkbox']){
      width:100%;
    }
    .headed-textarea,
    .description{
      grid-column:1/-1;
    }
  }
  .repcontainer{
    display:grid;
    gap:var(--grid-gap);
  }
  .repeating-container{
    display:grid;
    grid-template-areas:'header';
    align-self:start;
    > .header{
      grid-area:header;
    }
    &:is(:hover,:focus-within,:focus){
      .repcontrol_edit:after,
      .repcontrol-button{
        opacity:1;
      }
    }
  }
  .repcontrol_edit{
    visibility:hidden;
    text-transform:none;
    &:after{
      @include repButton;
      visibility:visible;
      content:'p';
    }
  }
  .repcontrol-button{
    grid-area:header;
    align-self:start;
    ~ .repcontrol{
      display:contents;
      .repcontrol_edit{
        grid-area:header;
        align-self:start;
        justify-self:end;
        display:flex;
        float:none;
      }
      .repcontrol_add{
        display:none !important;
      }
    }
  }
  .repcontrol-button--add{
    justify-self:start;
    @include repButton;
    &:before{
      font-family:pictos;
      content:'&';
    }
  }
}