@c8y/style/styles/_dlt-c8y-icons-stroke.less

Styles for Cumulocity IoT applications

.dlt-c8y-icon-collapse-arrow {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-collapse-arrow;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-forward {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-forward;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-breadcrumb {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-breadcrumb;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-expand-arrow {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-expand-arrow;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-caret-back {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-caret-back;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-double-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-double-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-double-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-double-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-double-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-double-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-double-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-double-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-circle-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-circle-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-circle-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-circle-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-circle-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-circle-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-chevron-circle-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-chevron-circle-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-panel-control-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-panel-control-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-double-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-double-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-panel-control-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-panel-control-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-double-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-double-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-panel-control-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-panel-control-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-double-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-double-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-panel-control-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-panel-control-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-angle-double-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-angle-double-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-download {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-download;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-upload {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-upload;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-internal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-internal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-external {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-external;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-undo {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-undo;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-redo {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-redo;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-signout {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-signout;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-signin {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-signin;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-login {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-login;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sign-in {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sign-in;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-logout {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-logout;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sign-out {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sign-out;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-o-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-o-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-o-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-o-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-o-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-o-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-o-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-o-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-up-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-up-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-down-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-down-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-up-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-up-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-bottom-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-bottom-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-diameter {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-diameter;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-divide-horizontal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-divide-horizontal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-circle-minimize-horizontal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-circle-minimize-horizontal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-caret-square-o-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-caret-square-o-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-toggle-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-toggle-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-caret-square-o-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-caret-square-o-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-toggle-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-toggle-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-caret-square-o-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-caret-square-o-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-toggle-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-toggle-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-caret-square-o-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-caret-square-o-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-toggle-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-toggle-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-enter-bottom {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-enter-bottom;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-enter-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-enter-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-enter-top {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-enter-top;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-enter-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-enter-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-exit-top {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-exit-top;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-exit-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-exit-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-exit-bottom {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-exit-bottom;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-exit-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-exit-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-input-output {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-input-output;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-rotate-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-rotate-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-rotate {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-rotate;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-repeat {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-repeat;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-reset {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-reset;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-rotate-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-rotate-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-restore {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-restore;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-refresh {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-refresh;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-process {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-process;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-recycle {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-recycle;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-refresh-exception {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-refresh-exception;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-lock-orientation {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-lock-orientation;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-dotted-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-dotted-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-dotted-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-dotted-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-advance {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-advance;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-dotted-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-dotted-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrow-dotted-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrow-dotted-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-dotted-left-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-dotted-left-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-dotted-up-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-dotted-up-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-up-down-arrows {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-up-down-arrows;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-collect {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-collect;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-merge-horizontal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-merge-horizontal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-split-horizontal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-split-horizontal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-merge-vertical {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-merge-vertical;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-divider {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-divider;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-split-vertical {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-split-vertical;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-drag {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-drag;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-move-step {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-move-step;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-resize-expand {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-resize-expand;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-alt {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-alt;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-expand {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-expand;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-compress {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-compress;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-resize-collapse {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-resize-collapse;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-collapse {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-collapse;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-fullscreen {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-fullscreen;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-fullscreen-exit {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-fullscreen-exit;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-long-arrow-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-long-arrow-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-long-arrow-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-long-arrow-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-long-arrow-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-long-arrow-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-long-arrow-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-long-arrow-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-v {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-v;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-h {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-h;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-enlarge {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-enlarge;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-data-transfer {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-data-transfer;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-exchange {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-exchange;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort-arrow {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort-arrow;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-arrows-left-right-diagonal {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-arrows-left-right-diagonal;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-level-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-level-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-level-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-level-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-u-turn {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-u-turn;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-u-turn-right {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-u-turn-right;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-u-turn-left {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-u-turn-left;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-undo1 {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-undo1;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-redo1 {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-redo1;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-unsorted {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-unsorted;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort-down {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort-down;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort-desc {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort-desc;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort-up {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort-up;
    }

    &:before {
      position: absolute;

      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }
  }
}

.dlt-c8y-icon-sort-asc {
  &.stroked-icon {
    position: relative;
    z-index: 0;
    &:after {
      position: relative;
      content: @dlt-c8y-icon-sort-asc;
    }