@import (reference) "../style/themes/default.less";
@import "../style/mixins/hairline";

.am-title {
  display: flex;
  align-items: center;
  padding: 0 @h-spacing-large @v-spacing-large;
  padding: 0 var(--am-title-paddingLR, @h-spacing-large) var(--am-title-paddingB, @v-spacing-large);
  font-size: @font-size-subtitle;
  font-size: var(--am-title-text-fontSize, @font-size-subtitle);
  color: @color-text-title;
  color: var(--am-title-text-color, @color-text-title);
  &-line {
    position: relative;
    margin-bottom: @v-spacing-large;
    margin-bottom: var(--am-title-marginBottom, @v-spacing-large);
		.hairline("bottom");
  }
  &-icon {
    width: @size-6;
    width: var(--am-title-icon-width, @size-6);
    height: @size-6;
    height: var(--am-title-icon-height, @size-6);
    overflow: hidden;
    margin-right: @h-spacing-standard;
    margin-right: var(--am-title-icon-marginRight, @h-spacing-standard);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
  }
  &-operation {
    width: @size-6;
    width: var(--am-operation-icon-width, @size-6);
    height: @size-6;
    height: var(--am-operation-icon-height, @size-6);
    overflow: hidden;
    text-align: center;
    line-height: @size-6;
    line-height: var(--am-title-operation-lineHeight, @size-6);
    margin-left: @h-spacing-standard;
    margin-left: var(--am-title-operation-marginLeft, @h-spacing-standard);
    &-icon {
      font-size: @icon-size-xs;
      font-size: var(--am-title-operation-icon-size, @icon-size-xs);
      color: @color-text-weak;
      color: var(--am-title-operation-icon-color, @color-text-weak);
    }
  }
}
