.corpus-layout
  margin-bottom: space-x(1)

  &__title
    display: flex
    align-items: center

    &__text
      font-size: $h3-font-size
      font-family: $headings-font-family

    &__line
      // (?) see "_list.sass" > ".table-header-rename__line" for more infos
      border-bottom: 1px solid $gray-200
      border-top: none
      // (?) strange behavior where browser engine add it by itself
      height: 0
      flex-grow: 1
      margin-left: space-x(4)
      margin-right: space-x(4)

    &__expand
      margin-left: space-x(4)


  &__edition-block
    border-bottom: 1px solid $gray-200
    // using <table-header-rename-edition> padding to prettify the overall UI
    // (+ <form-group> padding)
    margin-bottom: calc( #{$card-spacer-y} + #{ space-x(0.75) } )

  &__code-section
    margin-top: space-x(1)

  &__folders
    margin-top: space-x(6)

  // @TODO: switch <tile-menu> component using a <popover> for a reworked
  //        <context-menu> (easier to use). <popover> has far too many issues,
  //        such as the below micro-managing
  .tile-menu__popover
    position: relative
    width: 200px

//////////////////////////////////////////////////////

.corpus-code-layout
  position: relative

  &__toolbar
    display: flex
    align-items: center
    justify-content: space-between
    border-bottom: 1px solid $border-color
    padding: $card-spacer-y $card-spacer-x
    background-color: $body-bg
    position: sticky
    top: $topbar-height
    z-index: z-index('corpus-code', 'toolbar')

    // @XXX: reset "main-page__main-route" wrapper margin
    margin-left: space-x(-4)
    margin-right: space-x(-4)
    margin-top: space-x(-3)

  &__fields
    margin-top: space-x(3)
    z-index: z-index('corpus-code', 'content')

.code-section-item

  // accentuate disabled icon effect
  .card-header .b-icon-button--disabled
    opacity: 0.2

  // using "bootstrap" Element change to alter the caret icon
  [aria-expanded="true"]
    transform: rotate(180deg)