@import '../../../lib/commonStyles/variable';

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 16px;
  border-bottom: 1px solid rc-palette('neutral', 'l02');

  &.classic {
    padding: 12px;
  }
}

.left {
  @include display_flex;

  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 96px - 16px); // 96px action menu width; 16px padding

  &.classic {
    width: calc(100% - 68px - 4px); // 68px action menu width; 4px padding
  }
}

.info {
  margin-left: 12px;
  display: flex;
  flex-flow: column;
  overflow: hidden;

  &.classic {
    max-width: 60px;
    margin-left: 12px;
  }
}

.name {
  @include rc-typography('body1');
  @include text-ellipsis;

  color: rc-palette('neutral', 'f06');
  margin-bottom: 2px;
}

.time {
  @include rc-typography('caption1');

  color: rc-palette('neutral', 'f04');
}