@divider-color: @default_text_color_medium;

app-divider {
  .divider {								/* minor cosmetics */
    display: table;
    font-size: 24px;
    text-align: center;
    width: 75%; 						/* divider width */
    margin: 40px auto;					/* spacing above/below */
  }
  .divider span { display: table-cell; position: relative; }
  .divider span:first-child, .divider span:last-child {
    width: 50%;
    top: 13px;							/* adjust vertical align */
    -moz-background-size: 100% 2px; 	/* line width */
    background-size: 100% 2px; 			/* line width */
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
  }
  .divider span:first-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(@divider-color));
    background-image: -webkit-linear-gradient(180deg, transparent, @divider-color);
    background-image: -moz-linear-gradient(180deg, transparent, @divider-color);
    background-image: -o-linear-gradient(180deg, transparent, @divider-color);
    background-image: linear-gradient(90deg, transparent, @divider-color);
  }
  .divider span:nth-child(2) {
    color: @divider-color; padding: 0px 5px; width: auto; white-space: nowrap;
  }
  .divider span:last-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@divider-color), to(transparent));
    background-image: -webkit-linear-gradient(180deg, @divider-color, transparent);
    background-image: -moz-linear-gradient(180deg, @divider-color, transparent);
    background-image: -o-linear-gradient(180deg, @divider-color, transparent);
    background-image: linear-gradient(90deg, @divider-color, transparent);
  }
}