diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
index 98557ec1ce9..c5b3f4d37ab 100644
--- a/addons/mail/static/src/components/composer/composer.scss
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -95,6 +95,11 @@
 .o_Composer_primaryToolButtons {
     display: flex;
     align-items: center;
+
+    &.o-composer-is-compact {
+        padding-left: map-get($spacers, 2);
+        padding-right: map-get($spacers, 2);
+    }
 }
 
 .o_Composer_sidebarMain {
@@ -128,39 +133,41 @@
 }
 
 .o_Composer_toolButton {
-    margin: 0 2px;
-
-    &:not(.o-mobile) {
-        margin-top: 2px;
-        margin-bottom: 2px;
-    }
+    // keep a margin between the buttons to prevent their focus shadow from overlapping
+    margin-left: map-get($spacers, 1);
+    margin-right: map-get($spacers, 1);
 }
 
 .o_Composer_toolButtons {
     display: flex;
+    padding-top: map-get($spacers, 1);
+    padding-bottom: map-get($spacers, 1);
 
     &:not(.o-composer-is-compact) {
         flex-direction: row;
         justify-content: space-between;
         flex: 100%;
     }
-
-    &:not(:last-child) .o_Composer_toolButton:last-child {
-        margin-right: 5px;
-    }
 }
 
 .o_Composer_toolButtonSeparator {
     flex: 0 0 auto;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-right: 5px;
+    margin-top: map-get($spacers, 2);
+    margin-bottom: map-get($spacers, 2);
 }
 
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
+// TODO FIXME o-open on the button should be enough.
+// Style of button when popover is "open" comes from web.Popover, and we can't
+// define a modifier on .o_Composer_button due to not being aware of Popover's
+// state in context of template. https://github.com/odoo/owl/issues/693
+.o_is_open .o_Composer_toolButton {
+    background-color: gray('200');
+}
+
 .o_Composer {
     background-color: lighten(gray('300'), 7%);
 
@@ -184,26 +191,14 @@
     }
 }
 
-.o_Composer_button {
-    color: gray('600');
+.o_Composer_button.o-composer-is-compact {
+    border-left: none; // overrides bootstrap button style
 
-    &.o-open{
-        background-color: gray('200');
-    }
-
-    &.o-composer-is-compact {
-        border-left: none;
+    :last-child {
         border-radius: 0 3px 3px 0;
     }
 }
 
-// TODO FIXME o-open on the button should be enough, https://github.com/odoo/owl/issues/693
-.o_is_open {
-    .o_Composer_button {
-        background-color: gray('200');
-    }
-}
-
 .o_Composer_buttonDiscard {
     border: 1px solid lighten(gray('400'), 5%);
 }
@@ -212,23 +207,6 @@
     border: 0;
 }
 
-.o_Composer_buttonSend {
-    border: 1px solid darken($o-brand-primary, 5%);
-
-    &:disabled {
-        // enforce this style (override jQuery style)
-        border: 1px solid darken($o-brand-primary, 5%);
-
-        &.o-composer-is-compact {
-            border-left: none;
-        }
-    }
-
-    &:not(:last-child) {
-        border-right: none;
-    }
-}
-
 .o_Composer_coreMain:not(.o-composer-is-compact) {
     background: white;
     border-radius: 5px;
@@ -250,11 +228,12 @@
 }
 
 .o_Composer_toolButton {
-    border: 0;
+    border: 0; // overrides bootstrap btn
+    background-color: white; // overrides bootstrap btn-light
+    color: gray('600'); // overrides bootstrap btn-light
 
-    &:hover {
-        // enforce this style (webclient btn-secondary)
-        border: 0;
+    &.o-open {
+        background-color: gray('200');
     }
 }
 
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index 2845466750f..bd14aed503a 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -76,10 +76,10 @@
                             <t t-if="props.isCompact">
                                 <div class="o_Composer_toolButtonSeparator"/>
                             </t>
-                            <div class="o_Composer_primaryToolButtons">
+                            <div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
                                 <Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection" t-ref="emojisPopover">
                                     <!-- TODO FIXME o-open not possible to code due to https://github.com/odoo/owl/issues/693 -->
-                                    <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-secondary"
+                                    <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light"
                                         t-att-class="{
                                             'o-open': false and state.displayed,
                                             'o-mobile': env.messaging.device.isMobile,
@@ -91,11 +91,11 @@
                                         <EmojisPopover/>
                                     </t>
                                 </Popover>
-                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-secondary fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
+                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
                             </div>
                             <t t-if="props.isExpandable">
                                 <div class="o_Composer_secondaryToolButtons">
-                                    <button class="btn btn-secondary fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
+                                    <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
                                 </div>
                             </t>
                         </div>