.gui-component-header {
  @apply rounded-t-xlarge border border-b-0 border-solid border-neutral-90 relative;

  &-selected {
    @include before-border(
      2px 2px 0 2px,
      solid,
      theme('colors.blue.primary'),
      theme('borderRadius.xlarge') theme('borderRadius.xlarge') 0 0
    );
  }

  &-hovered {
    @apply border-blue-primary;
  }
}

.gui-component-header-top {
  @apply flex p-4 border border-t-0 border-l-0 border-r-0 border-solid border-neutral-90 items-center;
}

.gui-component-counter {
  @apply text-neutral-primary mr-2 text-lg;
}

.gui-component-label {
  @apply flex text-lg leading-6 w-full items-center;
}

.gui-component-label-text {
  @apply font-semi-bold text-neutral-20 mb-0 text-lg leading-6 break-all;
}

.gui-component-sublabel {
  @apply text-neutral-primary ml-1;
}

.gui-component-header-aside {
  @apply ml-auto flex-shrink-0;
}

.gui-component-instructions {
  @apply rounded-none border-0 border-b border-solid border-neutral-90 text-sm p-4 align-top;

  &:focus {
    @apply border-0 border-b border-solid border-neutral-90;
  }
}

.gui-component-body {
  @apply border-b-0 border-t-0;

  &-selected {
    @include before-border(0 2px, solid, theme('colors.blue.primary'), 0);
  }
}

.gui-component-body,
.gui-component-footer {
  @apply px-4 pt-4 border-0 border-l border-r border-solid border-neutral-90 relative;

  &-editable {
    @apply bg-neutral-95;
  }

  &-dragged-over {
    @apply bg-neutral-90;
  }

  &-hovered {
    @apply border-blue-primary;
  }
}

.gui-component-footer {
  @apply border-b rounded-b-xlarge py-4;

  &-selected {
    @include before-border(
      0 2px 2px 2px,
      solid,
      theme('colors.blue.primary'),
      0 0 theme('borderRadius.xlarge') theme('borderRadius.xlarge')
    );
  }
}