/*******************************************************************************
* Copyright (c) 2020 IBM Corporation and others.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v20.html
*
* Contributors:
*     IBM Corporation - initial API and implementation
******************************************************************************/
@import "~@carbon/colors/scss/colors";
@import "~@carbon/layout/scss/spacing";
@import "~@carbon/type/scss/type";
@import "~@carbon/grid/scss/grid";

.Capabilities {
  margin-top:0;
  margin-bottom: $carbon--spacing-08;
  padding: 0 0 $carbon--spacing-05 0;
  background-color: $carbon--gray-80;
}

.Capabilities .closeButton {
  margin-right:8px;
}

.Capabilities .closeButton .bx--btn--ghost:hover .bx--btn__icon,
.Capabilities .closeButton .bx--btn--ghost:active .bx--btn__icon {
  fill: white;
}

.Capabilities .closeButton .bx--btn__icon {
  fill: white;
  height: 1.5rem;
  width: 1.5rem;
  margin:0;
}

.Capabilities .rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Capabilities .rows::after {
  content: "";
  flex: auto;
}

.Capabilities .row{
  @extend .bx--col-lg-16;
  @extend .bx--col-md-8;
  @extend .bx--col-sm-4;
  @include properties($body-short-01);
  padding-bottom: $carbon--spacing-04;
  margin-bottom: 0;
}


.Capabilities .row .headline {
  margin-top:0;
  margin-bottom:$carbon--spacing-01;
  padding-left: $carbon--spacing-05 ;
  vertical-align: middle;
}

.Capabilities .icon {
  display: inline;
  vertical-align:middle;
}

.Capabilities .capability {
  @include properties($productive-heading-02);
  display: inline;
  margin-left:$carbon--spacing-04;
}

.Capabilities .capability_nomargin {
  @include properties($productive-heading-02);
  display: inline;
}

.Capabilities .description{
  @include properties($body-short-01);
  margin-left:$carbon--spacing-09;
}

.Capabilities .actions {
  text-align: right;
}
