@import '../../../assets/mixins.less';

.mat-element {
  &.detailed {
    .flex(row);
  }
  .main-panel {
    height: 100%;
    .flex(column);
    .flex-grow-shrink-basis(3, 1, 0);
    &.compact {
      font-size: 0.5rem;
    }
    .mat-name {
      // push down the name
      display: flex;
      .flex-grow-shrink-basis(1, 1, auto);
      align-items: flex-end;
    }
  }
  .side-panel {
    font-size: 0.75rem;
    .flex(column);
    .flex-grow-shrink-basis(1, 1, 0);
    text-align: right;
    padding: 5px;
  }
}