@import './color';

.md-flex {
  display: flex;
}
.flex-center {
  align-items: center;
  justify-content: center;
  .md-flex;
}
.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.column-center {
  .flex-center;
  .flex-column;
}

.pointer {
  cursor: pointer;
}

.icon-hover {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  &:hover {
    color: rgba(255, 255, 255, 1);
  }
}

.wh100 {
  width: 100%;
  height: 100%;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.flex1 {
  flex: 1;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis-multi-line(@line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: @line;
}

.letter-space-l-1 {
  margin-left: 0.5em;
}

.letter-space-r-1 {
  margin-right: 0.5em;
}

.letter-space-lr-1 {
  .letter-space-l-1;
  .letter-space-r-1;
}

.md-btn-primary {
  background-color: @primary-color !important;
  &:hover {
    background-color: @primary-color--hover !important;
  }
}

.shrink-0 {
  flex-shrink: 0;
}
