.jenkins-side-panel-skeleton,
.jenkins-form-skeleton {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1;

  & > * {
    background: var(--button-background);
    border: var(--jenkins-border--subtle);
    border-radius: var(--form-input-border-radius);
    height: 2.375rem;
    animation: pulse-skeleton 2s both ease-in-out infinite;
  }

  & > span {
    height: 1.5rem;
    opacity: 0.5;

    &:nth-of-type(1) {
      width: 20%;
    }

    &:nth-of-type(2) {
      width: 10%;
    }

    &:nth-of-type(3) {
      width: 5%;
    }

    &:nth-of-type(4) {
      width: 15%;
    }

    &:nth-of-type(5) {
      width: 10%;
    }

    &:nth-of-type(6) {
      width: 20%;
    }

    &:nth-of-type(7) {
      width: 10%;
    }

    &:nth-of-type(8) {
      width: 5%;
    }

    &:nth-of-type(9) {
      width: 15%;
    }

    &:nth-of-type(10) {
      width: 10%;
    }
  }

  & > div {
    height: 2.375rem;
    margin-bottom: 1rem;
  }
}

.jenkins-side-panel-skeleton {
  gap: 0.125rem;

  & > div {
    margin: 0 -0.7rem;
  }
}

@keyframes pulse-skeleton {
  50% {
    background: var(--button-background--active);
  }
}

body:has(.jenkins-form-skeleton) {
  section,
  .jenkins-form-item,
  #bottom-sticker {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}