.component-info {

  .mui-font-style-subhead-1;
  width: 100%;

  td {
    padding: 16px 0;
    vertical-align: top;
  }

  .component-info-name {
    position: absolute;

    .mui-font-weight-medium;
  }

  .component-info-type {
    .mui-text-light-black;
    padding-right: @desktop-gutter;
  }

  .component-info-header {
    .mui-font-style-subhead-1;
    padding-top: 0;
  }

  .component-info-desc {
    width: 100%;
    padding-top: 48px;
    border-bottom: solid 1px @border-color;

    p {
      margin: 0;
    }
  }

  tr:last-child {
    .component-info-desc {
      border-bottom: none;
    }
  }

  @media @device-medium {
    .component-info-name {
      position: inherit;
      padding-right: @desktop-gutter;
    }
    .component-info-desc {
      padding-top: 16px;
    }
  }

  @media @device-large {
    td {
      padding: 32px 0;
    }

    .component-info-name {
      min-width: 128px;
    }

    .component-info-desc {
      padding-top: 32px;
    }
  }
}