diff --git a/app/assets/javascripts/app/views/report/time_picker.jst.eco b/app/assets/javascripts/app/views/report/time_picker.jst.eco
index 96a17b978..2e1486fa5 100644
--- a/app/assets/javascripts/app/views/report/time_picker.jst.eco
+++ b/app/assets/javascripts/app/views/report/time_picker.jst.eco
@@ -2,7 +2,7 @@
   <% if @params.timeRange is 'day': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeDay: %>
-        <div class="btn btn--textLarge js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -10,7 +10,7 @@
   <% if @params.timeRange is 'day' || @params.timeRange is 'month': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeMonth: %>
-        <div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -18,7 +18,7 @@
   <% if @params.timeRange is 'week': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeWeek: %>
-        <div class="btn btn--textLarge js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -26,7 +26,7 @@
   <% if @params.timeRange isnt 'realtime': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeYear: %>
-        <div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
diff --git a/app/assets/javascripts/app/views/time_accounting/index.jst.eco b/app/assets/javascripts/app/views/time_accounting/index.jst.eco
index da28bb51d..ca3ed3f50 100644
--- a/app/assets/javascripts/app/views/time_accounting/index.jst.eco
+++ b/app/assets/javascripts/app/views/time_accounting/index.jst.eco
@@ -25,13 +25,13 @@
     <div class="well">
       <div class="btn-group btn-group--full" role="group" aria-label="">
         <% for item in @timeRangeYear: %>
-          <div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+          <div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
         <% end %>
       </div>
 
       <div class="btn-group btn-group--full" role="group" aria-label="">
         <% for item in @timeRangeMonth: %>
-          <div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+          <div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
         <% end %>
       </div>
     </div>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index b732696ba..fdc4abbd2 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -385,7 +385,7 @@ pre code.hljs {
     fill: currentColor;
   }
 
-  &.btn--icon--last .icon {
+  &--icon--last .icon {
     @include bidi-style(margin-left, 5px, margin-right, 0); // so far only used in ticket_zoom secondaryAction dropup
   }
 
@@ -393,23 +393,23 @@ pre code.hljs {
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
   }
 
-  &.btn--small {
+  &--small {
     padding-top: 5px;
     padding-bottom: 4px;
   }
 
-  &.btn--slim {
+  &--slim {
     padding-left: 12px;
     padding-right: 12px;
   }
 
-  &.btn--fullWidth {
+  &--fullWidth {
     width: 100%;
     text-align: center;
     justify-content: center;
   }
 
-  &.btn--table {
+  &--table {
     padding: 4px 9px;
     border: none;
     margin: 5px 6px 0;
@@ -434,7 +434,7 @@ pre code.hljs {
     background: hsl(0,0%,98%);
   }
 
-  &.btn--action {
+  &--action {
     text-transform: uppercase;
     color: hsl(0,0%,60%);
     font-size: 12px;
@@ -471,7 +471,7 @@ pre code.hljs {
   }
 
   // used in .recipientList-controls and in breadcrumbs
-  &.btn--onDark {
+  &--onDark {
     background: hsla(200,100%,97%,0.15);
     border-color: hsl(250,7%,16%);
     color: white;
@@ -481,7 +481,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--primary {
+  &--primary {
     color: white;
     background: hsl(203,65%,55%);
     &:active {
@@ -493,13 +493,13 @@ pre code.hljs {
     }
   }
 
-  &.btn--secondary {
+  &--secondary {
     color: hsl(202,68%,54%);
   }
 
-  &.btn--positive,
-  &.btn--create,
-  &.btn--success {
+  &--positive,
+  &--create,
+  &--success {
     color: white;
     background: hsl(145,51%,45%);
 
@@ -521,7 +521,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--danger {
+  &--danger {
     color: white;
     background: hsl(0,65%,55%);
     
@@ -539,7 +539,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--text {
+  &--text {
     font-size: inherit;
     margin: -10px;
     padding: 10px;
@@ -603,12 +603,13 @@ pre code.hljs {
     }
   }
 
-  &.btn--textLarge {
-    @extend .btn--text;
-    margin: 0px;
+  &--large {
+    &.btn--text {
+      margin: 0;
+    }
   }
 
-  &.btn--quad {
+  &--quad {
     padding: 10px 12px 9px;
 
     .icon {
@@ -616,21 +617,21 @@ pre code.hljs {
     }
   }
 
-  &.btn--split--first {
+  &--split--first {
     @include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0);
   }
-  &.btn--split,
-  &.btn--split--last {
+  &--split,
+  &--split--last {
     border-radius: 0;
     @include bidi-style(border-left-width, 0, border-right-width, 1px);
     @include ltr(margin-left, 0 !important);
     @include rtl(margin-right, 0 !important);
   }
-  &.btn--split--last {
+  &--split--last {
     @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
   }
 
-  &.btn--dropdown {
+  &--dropdown {
     position: relative;
 
     select {
@@ -717,7 +718,7 @@ pre code.hljs {
   display: inline-flex;
   flex-wrap: wrap;
 
-  &.btn-group--full {
+  &--full {
     display: flex;
   }
 
@@ -744,7 +745,7 @@ pre code.hljs {
     }
   }
 
-  .btn--text, .btn--textLarge {
+  .btn--text {
     padding: 6px 10px 5px; /* reporting main.eco */
     display: inline-block;
     border-radius: 3px;