.md {
  @import (multiple) '../../less/colors-md.less';
  .icon-back {
    width: 24px;
    height: 24px;
  }
  .icon-forward {
    width: 24px;
    height: 24px;
  }
  .icon-next, .icon-prev {
    width: 24px;
    height: 24px;
  }
  .list .icon {
    color: #737373;
  }
  .list .material-icons {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
  .ltr({
    .icon-back {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>");
    }
    .icon-forward {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#ffffff'/></svg>");
    }
    .icon-next {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    .icon-prev {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
  });
  .rtl({
    .icon-forward {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>");
    }
    .icon-back {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#ffffff'/></svg>");
    }
    .icon-prev {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    .icon-next {
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
  });
  .color-theme-loop({
    .ltr({
      .icon-back.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-back {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{colorThemeValue}'/></svg>");
      }
      .icon-forward.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-forward {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{colorThemeValue}'/></svg>");
      }
      .icon-next.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-next {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      }
      .icon-prev.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-prev {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      }
    });
    .rtl({
      .icon-forward.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-forward {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{colorThemeValue}'/></svg>");
      }
      .icon-back.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-back {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{colorThemeValue}'/></svg>");
      }
      .icon-prev.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-prev {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      }
      .icon-next.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-next {
        .svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      }
    });
  });
  .color-loop({
    .icon.color-@{colorName} {
      color: @colorValue;
    }
  });
}