feat: improve rtl support

sass/components/breadcrumb.sass

@@ -26,7 +26,7 @@ $breadcrumb-item-separator-color: $border-hover !default
     align-items: center
     display: flex
     &:first-child a
-      +ltr-property("padding", 0, false)
+      padding-inline-start: 0
     &.is-active
       a
         color: $breadcrumb-item-active-color
@@ -43,9 +43,9 @@ $breadcrumb-item-separator-color: $border-hover !default
     justify-content: flex-start
   .icon
     &:first-child
-      +ltr-property("margin", 0.5em)
+      margin-inline-end: 0.5em
     &:last-child
-      +ltr-property("margin", 0.5em, false)
+      margin-inline-start: 0.5em
   // Alignment
   &.is-centered
     ol,

sass/components/card.sass

@@ -94,7 +94,7 @@ $card-media-margin: $block-spacing !default
   justify-content: center
   padding: $card-footer-padding
   &:not(:last-child)
-    +ltr-property("border", $card-footer-border-top)
+    border-inline-end-width: $card-footer-border-top
 
 // Combinations
 

sass/components/dropdown.sass

@@ -40,7 +40,7 @@ $dropdown-divider-background-color: $border-light !default
 
 .dropdown-menu
   display: none
-  +ltr-position(0, false)
+  inset-inline-start: 0
   min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
@@ -64,7 +64,7 @@ $dropdown-divider-background-color: $border-light !default
 
 a.dropdown-item,
 button.dropdown-item
-  +ltr-property("padding", 3rem)
+  padding-inline-end: 3rem
   text-align: inherit
   white-space: nowrap
   width: 100%

sass/components/level.sass

@@ -22,7 +22,7 @@ $level-item-spacing: ($block-spacing * 0.5) !default
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        +ltr-property("margin", $level-item-spacing)
+        margin-inline-end: $level-item-spacing
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -59,7 +59,7 @@ $level-item-spacing: ($block-spacing * 0.5) !default
     // Responsiveness
     +tablet
       &:not(:last-child)
-        +ltr-property("margin", $level-item-spacing)
+        margin-inline-end: $level-item-spacing
 
 .level-left
   align-items: center

sass/components/media.sass

@@ -43,10 +43,10 @@ $media-level-2-spacing: 0.5rem !default
   flex-shrink: 0
 
 .media-left
-  +ltr-property("margin", $media-spacing)
+  margin-inline-end: $media-spacing
 
 .media-right
-  +ltr-property("margin", $media-spacing, false)
+  margin-inline-start: $media-spacing
 
 .media-content
   flex-basis: auto

sass/components/menu.sass

@@ -44,9 +44,9 @@ $menu-label-spacing: 1em !default
       color: $menu-item-active-color
   li
     ul
-      +ltr-property("border", $menu-list-border-left, false)
+      border-inline-start-width: $menu-list-border-left
       margin: $menu-nested-list-margin
-      +ltr-property("padding", $menu-nested-list-padding-left, false)
+      padding-inline-start: $menu-nested-list-padding-left
 
 .menu-label
   color: $menu-label-color

sass/components/message.sass

@@ -81,7 +81,7 @@ $message-colors: $colors !default
   .delete
     flex-grow: 0
     flex-shrink: 0
-    +ltr-property("margin", 0.75em, false)
+    margin-inline-start: 0.75em
   & + .message-body
     border-width: $message-header-body-border-width
     border-top-left-radius: 0

sass/components/modal.sass

@@ -67,7 +67,7 @@ $modal-breakpoint: $tablet !default
   background: none
   height: $modal-close-dimensions
   position: fixed
-  +ltr-position($modal-close-right)
+  inset-inline-end: $modal-close-right
   top: $modal-close-top
   width: $modal-close-dimensions
 
@@ -106,7 +106,7 @@ $modal-breakpoint: $tablet !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      +ltr-property("margin", 0.5em)
+      margin-inline-end: 0.5em
 
 .modal-card-body
   +overflow-touch

sass/components/navbar.sass

@@ -156,7 +156,7 @@ body
   @extend %reset
   color: $navbar-burger-color
   +hamburger($navbar-height)
-  +ltr-property("margin", auto, false)
+  margin-inline-start: auto
 
 .navbar-menu
   display: none
@@ -214,12 +214,12 @@ a.navbar-item,
   flex-shrink: 1
 
 .navbar-link:not(.is-arrowless)
-  +ltr-property("padding", 2.5em)
+  padding-inline-end: 2.5em
   &::after
     @extend %arrow
     border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
-    +ltr-position(1.125em)
+    inset-inline-end: 1.125em
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -352,10 +352,10 @@ a.navbar-item,
     flex-shrink: 0
   .navbar-start
     justify-content: flex-start
-    +ltr-property("margin", auto)
+    margin-inline-end: auto
   .navbar-end
     justify-content: flex-end
-    +ltr-property("margin", auto, false)
+    margin-inline-start: auto
   .navbar-dropdown
     background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
@@ -364,7 +364,7 @@ a.navbar-item,
     box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
-    +ltr-position(0, false)
+    inset-inline-start: 0
     min-width: 100%
     position: absolute
     top: 100%
@@ -373,7 +373,7 @@ a.navbar-item,
       padding: 0.375rem 1rem
       white-space: nowrap
     a.navbar-item
-      +ltr-property("padding", 3rem)
+      padding-inline-end: 3rem
       &:focus,
       &:hover
         background-color: $navbar-dropdown-item-hover-background-color
@@ -401,9 +401,9 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      +ltr-property("margin", -.75rem, false)
+      margin-inline-start: -.75rem
     .navbar-menu
-      +ltr-property("margin", -.75rem)
+      margin-inline-end: -.75rem
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,

sass/components/panel.sass

@@ -90,7 +90,7 @@ $panel-colors: $colors !default
   justify-content: flex-start
   padding: 0.5em 0.75em
   input[type="checkbox"]
-    +ltr-property("margin", 0.75em)
+    margin-inline-end: 0.75em
   & > .control
     flex-grow: 1
     flex-shrink: 1
@@ -115,7 +115,7 @@ label.panel-block
 .panel-icon
   +fa(14px, 1em)
   color: $panel-icon-color
-  +ltr-property("margin", 0.75em)
+  margin-inline-end: 0.75em
   .fa
     font-size: inherit
     line-height: inherit

sass/components/tabs.sass

@@ -80,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
       padding-left: 0.75em
   .icon
     &:first-child
-      +ltr-property("margin", 0.5em)
+      margin-inline-end: 0.5em
     &:last-child
-      +ltr-property("margin", 0.5em, false)
+      margin-inline-start: 0.5em
   // Alignment
   &.is-centered
     ul
@@ -94,10 +94,8 @@ $tabs-toggle-link-active-color: $link-invert !default
   &.is-boxed
     a
       border: 1px solid transparent
-      +ltr
-        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
-      +rtl
-        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
+      border-start-start-radius: $tabs-boxed-link-radius
+      border-start-end-radius: $tabs-boxed-link-radius
       &:hover
         background-color: $tabs-boxed-link-hover-background-color
         border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -124,21 +122,13 @@ $tabs-toggle-link-active-color: $link-invert !default
         z-index: 2
     li
       & + li
-        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
+        margin-inline-start: -#{$tabs-toggle-link-border-width}
       &:first-child a
-        +ltr
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
-        +rtl
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
+        border-start-start-radius: $tabs-toggle-link-radius
+        border-end-start-radius: $tabs-toggle-link-radius
       &:last-child a
-        +ltr
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
-        +rtl
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
+        border-start-end-radius: $tabs-toggle-link-radius
+        border-end-end-radius: $tabs-toggle-link-radius
       &.is-active
         a
           background-color: $tabs-toggle-link-active-background-color
@@ -150,23 +140,13 @@ $tabs-toggle-link-active-color: $link-invert !default
     &.is-toggle-rounded
       li
         &:first-child a
-          +ltr
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
-            padding-left: 1.25em
-          +rtl
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
-            padding-right: 1.25em
+          border-end-start-radius: $radius-rounded
+          border-start-start-radius: $radius-rounded
+          padding-start: 1.25em
         &:last-child a
-          +ltr
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
-            padding-right: 1.25em
-          +rtl
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
-            padding-left: 1.25em
+          border-end-end-radius: $radius-rounded
+          border-start-end-radius: $radius-rounded
+          padding-end: 1.25em
   // Sizes
   &.is-small
     font-size: $size-small

sass/elements/button.sass

@@ -85,11 +85,11 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal * 0.25)
+      margin-inline-start: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+      margin-inline-end: $button-padding-horizontal * 0.25
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal * 0.25, false)
-      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
+      margin-inline-start: $button-padding-horizontal * 0.25
+      margin-inline-end: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
     &:first-child:last-child
       margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
       margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
@@ -292,7 +292,7 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
   .button
     margin-bottom: 0.5rem
     &:not(:last-child):not(.is-fullwidth)
-      +ltr-property("margin", 0.5rem)
+      margin-inline-end: 0.5rem
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -315,9 +315,9 @@ $button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": (
       &:not(:last-child)
         border-bottom-right-radius: 0
         border-top-right-radius: 0
-        +ltr-property("margin", -1px)
+        margin-inline-end: -1px
       &:last-child
-        +ltr-property("margin", 0)
+        margin-inline-end: 0
       &:hover,
       &.is-hovered
         z-index: 2

sass/elements/content.sass

@@ -72,11 +72,11 @@ $content-table-foot-cell-color: $text-strong !default
     margin-bottom: 1em
   blockquote
     background-color: $content-blockquote-background-color
-    +ltr-property("border", $content-blockquote-border-left, false)
+    border-inline-start-width: $content-blockquote-border-left
     padding: $content-blockquote-padding
   ol
     list-style-position: outside
-    +ltr-property("margin", 2em, false)
+    margin-inline-start: 2em
     margin-top: 1em
     &:not([type])
       list-style-type: decimal
@@ -90,15 +90,15 @@ $content-table-foot-cell-color: $text-strong !default
         list-style-type: upper-roman
   ul
     list-style: disc outside
-    +ltr-property("margin", 2em, false)
+    margin-inline-start: 2em
     margin-top: 1em
     ul
       list-style-type: circle
       margin-top: 0.5em
       ul
         list-style-type: square
   dd
-    +ltr-property("margin", 2em, false)
+    margin-inline-start: 2em
   figure
     margin-left: 2em
     margin-right: 2em

sass/elements/icon.sass

@@ -32,15 +32,9 @@ $icon-text-spacing: 0.25em !default
     flex-grow: 0
     flex-shrink: 0
     &:not(:last-child)
-      +ltr
-        margin-right: $icon-text-spacing
-      +rtl
-        margin-left: $icon-text-spacing
+      margin-end: $icon-text-spacing
     &:not(:first-child)
-      +ltr
-        margin-left: $icon-text-spacing
-      +rtl
-        margin-right: $icon-text-spacing
+      margin-start: $icon-text-spacing
 
 div.icon-text
   display: flex