.repeatableLayout {
  > ol,
  > ul {
    list-style-position: inside;
    margin-bottom: 6px;
    margin-left: 0;

    > li {
      background-color: rgb(255 255 255 / 50%);
      border: 1px solid @color-heading;
      border-radius: 2px;
      margin-bottom: 6px;
      padding: 0 6px;
      position: relative;

      > .repeatableLabel {
        .background-flat(@color-heading);

        cursor: pointer;
        left: 0;
        margin: 0 -6px 6px;
        min-height: 22px;
        padding: 5px 12px;
      }

      > .layouts {
        margin-bottom: 4px;
      }

      > .removeButton {
        color: @color-remove;
        position: absolute;
        right: 5px;
        top: 10px;

        &:hover {
          color: var(--colorError);
        }
      }

      &.toBeRemoved {
        border-color: #fdd;
        padding-bottom: 0;

        > .repeatableLabel {
          border-bottom-style: none;
          color: @color-remove;
          margin-bottom: 0;
          text-decoration: line-through;

          &::after {
            visibility: hidden;
          }
        }

        > .layouts {
          display: none;
        }

        > .removeButton {
          color: @color-link-dark;
        }
      }
    }
  }

  > .addButtonContainer {
    overflow: hidden;

    > .addButton {
      float: left;
      margin-right: 15px;
      white-space: nowrap;
    }
  }

  &.state-disabled {
    .removeButton,
    .addButtonContainer {
      display: none;
    }
  }
}

.addButtonSelectContainer {
  &::before {
    vertical-align: bottom;
  }
}
