@allxsmith/bestax-bulma 2.6.2 → 3.0.2

package/src/scss/_variables.scss

@@ -0,0 +1,94 @@
+// Bestax Extras - SCSS Variables
+// These variables leverage Bulma v1 CSS custom properties for theming compatibility
+
+// Color scheme references (use Bulma's CSS variables)
+$extras-scheme-h: var(--bulma-scheme-h, 221);
+$extras-scheme-s: var(--bulma-scheme-s, 14%);
+
+// Primary color references (fallbacks track bestax primary #1e6b99)
+$extras-primary-h: var(--bulma-primary-h, 202);
+$extras-primary-s: var(--bulma-primary-s, 67%);
+$extras-primary-l: var(--bulma-primary-l, 36%);
+$extras-primary: hsl($extras-primary-h, $extras-primary-s, $extras-primary-l);
+
+// Link color references
+$extras-link-h: var(--bulma-link-h, 229);
+$extras-link-s: var(--bulma-link-s, 53%);
+$extras-link-l: var(--bulma-link-l, 53%);
+$extras-link: hsl($extras-link-h, $extras-link-s, $extras-link-l);
+
+// Info color references
+$extras-info-h: var(--bulma-info-h, 207);
+$extras-info-s: var(--bulma-info-s, 61%);
+$extras-info-l: var(--bulma-info-l, 53%);
+$extras-info: hsl($extras-info-h, $extras-info-s, $extras-info-l);
+
+// Success color references
+$extras-success-h: var(--bulma-success-h, 153);
+$extras-success-s: var(--bulma-success-s, 53%);
+$extras-success-l: var(--bulma-success-l, 53%);
+$extras-success: hsl($extras-success-h, $extras-success-s, $extras-success-l);
+
+// Warning color references
+$extras-warning-h: var(--bulma-warning-h, 44);
+$extras-warning-s: var(--bulma-warning-s, 100%);
+$extras-warning-l: var(--bulma-warning-l, 77%);
+$extras-warning: hsl($extras-warning-h, $extras-warning-s, $extras-warning-l);
+
+// Danger color references
+$extras-danger-h: var(--bulma-danger-h, 348);
+$extras-danger-s: var(--bulma-danger-s, 86%);
+$extras-danger-l: var(--bulma-danger-l, 61%);
+$extras-danger: hsl($extras-danger-h, $extras-danger-s, $extras-danger-l);
+
+// Typography
+$extras-family-primary: var(--bulma-family-primary, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif);
+$extras-family-code: var(--bulma-family-code, "Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace);
+
+// Font weights
+$extras-weight-light: var(--bulma-weight-light, 300);
+$extras-weight-normal: var(--bulma-weight-normal, 400);
+$extras-weight-medium: var(--bulma-weight-medium, 500);
+$extras-weight-semibold: var(--bulma-weight-semibold, 600);
+$extras-weight-bold: var(--bulma-weight-bold, 700);
+
+// Sizing
+$extras-size-small: var(--bulma-size-small, 0.75rem);
+$extras-size-normal: var(--bulma-size-normal, 1rem);
+$extras-size-medium: var(--bulma-size-medium, 1.25rem);
+$extras-size-large: var(--bulma-size-large, 1.5rem);
+
+// Spacing
+$extras-block-spacing: var(--bulma-block-spacing, 1.5rem);
+
+// Borders and radius
+$extras-radius-small: var(--bulma-radius-small, 2px);
+$extras-radius: var(--bulma-radius, 4px);
+$extras-radius-medium: var(--bulma-radius-medium, 6px);
+$extras-radius-large: var(--bulma-radius-large, 8px);
+$extras-radius-rounded: var(--bulma-radius-rounded, 9999px);
+
+// Transitions
+$extras-duration: var(--bulma-duration, 0.29s);
+$extras-easing: var(--bulma-easing, ease-out);
+
+// Control sizing
+$extras-control-radius: var(--bulma-control-radius, 4px);
+$extras-control-height: var(--bulma-control-height, 2.5em);
+$extras-control-padding-vertical: var(--bulma-control-padding-vertical, calc(0.5em - 1px));
+$extras-control-padding-horizontal: var(--bulma-control-padding-horizontal, calc(0.75em - 1px));
+
+// Z-index layers
+$extras-z-index-base: 1;
+$extras-z-index-dropdown: 20;
+$extras-z-index-sticky: 30;
+$extras-z-index-fixed: 40;
+$extras-z-index-modal-backdrop: 50;
+$extras-z-index-modal: 60;
+$extras-z-index-tooltip: 70;
+$extras-z-index-toast: 80;
+
+// Shadows
+$extras-shadow-small: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
+$extras-shadow-medium: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
+$extras-shadow-large: 0 1em 2em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);

package/src/scss/bestax.scss

@@ -0,0 +1,18 @@
+// Bestax - Combined Bulma + Extras
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/bestax.css';
+//
+// Usage (SCSS source):
+//   @use '@allxsmith/bestax-bulma/scss/bestax';
+
+// Include all of Bulma (primary overridden to bestax blue)
+@use 'bulma/sass' with ($primary: #1e6b99);
+
+// Include bestax extras
+@use 'variables';
+@use 'mixins';
+@use 'components/index' as components;
+@use 'form/index' as form;
+@use 'elements/index' as elements;
+@use 'helpers/index' as helpers;

package/src/scss/components/_carousel.scss

@@ -0,0 +1,580 @@
+// Carousel component styles
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Carousel-specific SCSS sizing variables
+$carousel-arrow-size: 48px !default;
+$carousel-arrow-size-mobile: 36px !default;
+$carousel-arrow-icon-size: 24px !default;
+$carousel-arrow-icon-size-mobile: 18px !default;
+$carousel-arrow-offset: 1rem !default;
+$carousel-arrow-offset-mobile: 0.5rem !default;
+$carousel-arrow-disabled-opacity: 0.3 !default;
+
+$carousel-indicator-size: 10px !default;
+$carousel-indicator-size-mobile: 8px !default;
+$carousel-indicator-gap: 0.5rem !default;
+$carousel-indicator-gap-mobile: 0.375rem !default;
+$carousel-indicator-circle-size: 12px !default;
+$carousel-indicator-line-width: 30px !default;
+$carousel-indicator-line-width-mobile: 20px !default;
+$carousel-indicator-line-height: 4px !default;
+$carousel-indicator-line-height-mobile: 3px !default;
+$carousel-indicator-bar-width: 24px !default;
+$carousel-indicator-bar-width-mobile: 16px !default;
+$carousel-indicator-bar-height: 6px !default;
+$carousel-indicator-bar-height-mobile: 4px !default;
+
+$carousel-transition-duration: cv.getVar("duration") !default;
+$carousel-fade-duration: 0.5s !default;
+
+// Arrow colors - use Bulma's scheme variables so they adapt to light/dark automatically
+// scheme-main-l is 100% in light mode, ~20% in dark mode
+// scheme-invert-l is 4% in light mode, ~96% in dark mode
+$carousel-arrow-background: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-main-l")},
+  0.8
+) !default;
+$carousel-arrow-background-hover: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-main-l")},
+  0.95
+) !default;
+
+// Overlay variant colors (for image carousels - always dark overlay regardless of theme)
+$carousel-overlay-arrow-background: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-invert-l")},
+  0.3
+) !default;
+$carousel-overlay-arrow-background-hover: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-invert-l")},
+  0.5
+) !default;
+$carousel-overlay-indicator-background: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-main-l")},
+  0.5
+) !default;
+$carousel-overlay-indicator-background-hover: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-main-l")},
+  0.8
+) !default;
+
+// Gradient overlay for inside indicators
+$carousel-gradient-overlay: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-invert-l")},
+  0.3
+) !default;
+
+$carousel-arrow-color: cv.getVar("text") !default;
+$carousel-indicator-background: cv.getVar("border") !default;
+$carousel-indicator-background-hover: cv.getVar("border-hover") !default;
+$carousel-indicator-background-active: cv.getVar("primary") !default;
+$carousel-overlay-arrow-color: cv.getVar("scheme-main") !default;
+$carousel-overlay-indicator-background-active: cv.getVar("scheme-main") !default;
+$carousel-arrow-radius: cv.getVar("radius") !default;
+$carousel-indicator-line-radius: cv.getVar("radius-small") !default;
+
+.#{iv.$class-prefix}carousel {
+  @include cv.register-vars(
+    (
+      "carousel-arrow-size": #{$carousel-arrow-size},
+      "carousel-arrow-size-mobile": #{$carousel-arrow-size-mobile},
+      "carousel-arrow-background": #{$carousel-arrow-background},
+      "carousel-arrow-background-hover": #{$carousel-arrow-background-hover},
+      "carousel-arrow-color": #{$carousel-arrow-color},
+      "carousel-arrow-disabled-opacity": #{$carousel-arrow-disabled-opacity},
+      "carousel-arrow-offset": #{$carousel-arrow-offset},
+      "carousel-arrow-offset-mobile": #{$carousel-arrow-offset-mobile},
+      "carousel-arrow-icon-size": #{$carousel-arrow-icon-size},
+      "carousel-arrow-icon-size-mobile": #{$carousel-arrow-icon-size-mobile},
+      "carousel-arrow-radius": #{$carousel-arrow-radius},
+      "carousel-indicator-size": #{$carousel-indicator-size},
+      "carousel-indicator-size-mobile": #{$carousel-indicator-size-mobile},
+      "carousel-indicator-gap": #{$carousel-indicator-gap},
+      "carousel-indicator-gap-mobile": #{$carousel-indicator-gap-mobile},
+      "carousel-indicator-background": #{$carousel-indicator-background},
+      "carousel-indicator-background-hover": #{$carousel-indicator-background-hover},
+      "carousel-indicator-background-active": #{$carousel-indicator-background-active},
+      "carousel-indicator-circle-size": #{$carousel-indicator-circle-size},
+      "carousel-indicator-line-width": #{$carousel-indicator-line-width},
+      "carousel-indicator-line-width-mobile": #{$carousel-indicator-line-width-mobile},
+      "carousel-indicator-line-height": #{$carousel-indicator-line-height},
+      "carousel-indicator-line-height-mobile": #{$carousel-indicator-line-height-mobile},
+      "carousel-indicator-line-radius": #{$carousel-indicator-line-radius},
+      "carousel-indicator-bar-width": #{$carousel-indicator-bar-width},
+      "carousel-indicator-bar-width-mobile": #{$carousel-indicator-bar-width-mobile},
+      "carousel-indicator-bar-height": #{$carousel-indicator-bar-height},
+      "carousel-indicator-bar-height-mobile": #{$carousel-indicator-bar-height-mobile},
+      "carousel-overlay-arrow-background": #{$carousel-overlay-arrow-background},
+      "carousel-overlay-arrow-background-hover": #{$carousel-overlay-arrow-background-hover},
+      "carousel-overlay-arrow-color": #{$carousel-overlay-arrow-color},
+      "carousel-overlay-indicator-background": #{$carousel-overlay-indicator-background},
+      "carousel-overlay-indicator-background-hover": #{$carousel-overlay-indicator-background-hover},
+      "carousel-overlay-indicator-background-active": #{$carousel-overlay-indicator-background-active},
+      "carousel-transition-duration": #{$carousel-transition-duration},
+      "carousel-fade-duration": #{$carousel-fade-duration},
+    )
+  );
+}
+
+.#{iv.$class-prefix}carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  // Container — also serves as positioning context for arrows
+  .#{iv.$class-prefix}carousel-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    user-select: none;
+    touch-action: pan-y;
+  }
+
+  // Slides container
+  .#{iv.$class-prefix}carousel-slides {
+    display: flex;
+    width: 100%;
+    will-change: transform;
+  }
+
+  // Individual slide
+  .#{iv.$class-prefix}carousel-item {
+    flex: 0 0 100%;
+    width: 100%;
+    min-width: 100%;
+
+    // Allow images to fill the slide
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  // Navigation arrows
+  .#{iv.$class-prefix}carousel-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: cv.getVar("carousel-arrow-size");
+    height: cv.getVar("carousel-arrow-size");
+    padding: 0;
+    border: none;
+    border-radius: cv.getVar("carousel-arrow-radius");
+    background-color: cv.getVar("carousel-arrow-background");
+    color: cv.getVar("carousel-arrow-color");
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity cv.getVar("carousel-transition-duration"),
+                background-color cv.getVar("carousel-transition-duration"),
+                transform cv.getVar("carousel-transition-duration");
+
+    // Override Button component default styles
+    &.#{iv.$class-prefix}button {
+      border: none;
+      background-color: cv.getVar("carousel-arrow-background");
+      background-image: none;
+
+      &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+        background-color: cv.getVar("carousel-arrow-background-hover");
+        background-image: none;
+        transform: translateY(-50%) scale(1.05);
+      }
+
+      &:disabled,
+      &.#{iv.$class-prefix}is-disabled {
+        opacity: cv.getVar("carousel-arrow-disabled-opacity");
+        cursor: not-allowed;
+        background-color: cv.getVar("carousel-arrow-background");
+        background-image: none;
+      }
+    }
+
+    &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+      background-color: cv.getVar("carousel-arrow-background-hover");
+      transform: translateY(-50%) scale(1.05);
+    }
+
+    &:disabled,
+    &.#{iv.$class-prefix}is-disabled {
+      opacity: cv.getVar("carousel-arrow-disabled-opacity");
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: cv.getVar("carousel-arrow-icon-size");
+      height: cv.getVar("carousel-arrow-icon-size");
+    }
+
+    // Icon component styling
+    .#{iv.$class-prefix}icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      // Match SVG sizing for consistency
+      &.#{iv.$class-prefix}is-small {
+        font-size: 0.875rem;
+      }
+
+      &.#{iv.$class-prefix}is-medium {
+        font-size: 1.25rem;
+      }
+
+      &.#{iv.$class-prefix}is-large {
+        font-size: 1.75rem;
+      }
+    }
+
+    &.#{iv.$class-prefix}is-prev {
+      left: cv.getVar("carousel-arrow-offset");
+    }
+
+    &.#{iv.$class-prefix}is-next {
+      right: cv.getVar("carousel-arrow-offset");
+    }
+
+    // Transparent variant (no background)
+    &.#{iv.$class-prefix}is-transparent {
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+
+      &.#{iv.$class-prefix}button {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+
+        &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+          background-color: transparent;
+          box-shadow: none;
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+
+        &:disabled,
+        &.#{iv.$class-prefix}is-disabled {
+          background-color: transparent;
+          box-shadow: none;
+        }
+      }
+
+      &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+        background-color: transparent;
+      }
+
+      &:focus {
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+
+  // Arrow color variants
+  &.#{iv.$class-prefix}is-arrow-light {
+    .#{iv.$class-prefix}carousel-arrow {
+      color: cv.getVar("scheme-main");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-arrow-dark {
+    .#{iv.$class-prefix}carousel-arrow {
+      color: cv.getVar("text-strong");
+    }
+  }
+
+  // Arrow hover variant
+  &.#{iv.$class-prefix}has-arrow-hover {
+    .#{iv.$class-prefix}carousel-arrow {
+      opacity: 0;
+    }
+
+    &:hover {
+      .#{iv.$class-prefix}carousel-arrow {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Indicators
+  .#{iv.$class-prefix}carousel-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: cv.getVar("carousel-indicator-gap");
+    padding: 1rem;
+    width: 100%;
+
+    &.#{iv.$class-prefix}is-inside {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(transparent, #{$carousel-gradient-overlay});
+      padding-bottom: 1.5rem;
+    }
+
+    &.#{iv.$class-prefix}is-top {
+      top: 0;
+      bottom: auto;
+      background: linear-gradient(#{$carousel-gradient-overlay}, transparent);
+      padding-top: 1.5rem;
+    }
+  }
+
+  // Indicator items
+  .#{iv.$class-prefix}indicator-item {
+    width: cv.getVar("carousel-indicator-size");
+    height: cv.getVar("carousel-indicator-size");
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: cv.getVar("carousel-indicator-background");
+    cursor: pointer;
+    transition: background-color cv.getVar("carousel-transition-duration"),
+                transform cv.getVar("carousel-transition-duration");
+
+    // Override Button component styles
+    &.#{iv.$class-prefix}button {
+      min-width: auto;
+      min-height: auto;
+      border: none;
+      padding: 0;
+      background-image: none;
+    }
+
+    &:hover {
+      background-color: cv.getVar("carousel-indicator-background-hover");
+      transform: scale(1.2);
+    }
+
+    &.#{iv.$class-prefix}is-active {
+      background-color: cv.getVar("carousel-indicator-background-active");
+    }
+  }
+
+  // Indicator styles
+  &.#{iv.$class-prefix}is-indicator-circles {
+    .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-circle-size");
+      height: cv.getVar("carousel-indicator-circle-size");
+      border: 2px solid cv.getVar("border");
+      background-color: transparent;
+
+      &.#{iv.$class-prefix}is-active {
+        border-color: cv.getVar("carousel-indicator-background-active");
+        background-color: cv.getVar("carousel-indicator-background-active");
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-indicator-lines {
+    .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-line-width");
+      height: cv.getVar("carousel-indicator-line-height");
+      border-radius: cv.getVar("carousel-indicator-line-radius");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-indicator-bars {
+    .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-bar-width");
+      height: cv.getVar("carousel-indicator-bar-height");
+      border-radius: cv.getVar("carousel-indicator-line-radius");
+    }
+  }
+
+  // Inside indicator light variant (overlay mode)
+  &.#{iv.$class-prefix}is-overlay {
+    .#{iv.$class-prefix}carousel-indicator.#{iv.$class-prefix}is-inside {
+      .#{iv.$class-prefix}indicator-item {
+        background-color: cv.getVar("carousel-overlay-indicator-background");
+
+        &:hover {
+          background-color: cv.getVar("carousel-overlay-indicator-background-hover");
+        }
+
+        &.#{iv.$class-prefix}is-active {
+          background-color: cv.getVar("carousel-overlay-indicator-background-active");
+        }
+      }
+    }
+
+    .#{iv.$class-prefix}carousel-arrow {
+      background-color: cv.getVar("carousel-overlay-arrow-background");
+      color: cv.getVar("carousel-overlay-arrow-color");
+
+      &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+        background-color: cv.getVar("carousel-overlay-arrow-background-hover");
+      }
+
+      &.#{iv.$class-prefix}button {
+        background-color: cv.getVar("carousel-overlay-arrow-background");
+        background-image: none;
+
+        &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+          background-color: cv.getVar("carousel-overlay-arrow-background-hover");
+          background-image: none;
+        }
+
+        &:disabled,
+        &.#{iv.$class-prefix}is-disabled {
+          background-color: cv.getVar("carousel-overlay-arrow-background");
+          background-image: none;
+        }
+      }
+
+      // Transparent variant within overlay
+      &.#{iv.$class-prefix}is-transparent {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+
+        &.#{iv.$class-prefix}button {
+          background-color: transparent;
+          box-shadow: none;
+          border: none;
+
+          &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+            background-color: transparent;
+            box-shadow: none;
+          }
+
+          &:focus {
+            box-shadow: none;
+          }
+
+          &:disabled,
+          &.#{iv.$class-prefix}is-disabled {
+            background-color: transparent;
+            box-shadow: none;
+          }
+        }
+
+        &:hover:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+          background-color: transparent;
+        }
+
+        &:focus {
+          box-shadow: none;
+          outline: none;
+        }
+      }
+    }
+  }
+
+  // Fade transition (alternative to slide)
+  &.#{iv.$class-prefix}is-fade {
+    .#{iv.$class-prefix}carousel-slides {
+      position: relative;
+    }
+
+    .#{iv.$class-prefix}carousel-item {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      opacity: 0;
+      transition: opacity cv.getVar("carousel-fade-duration") ease-in-out;
+
+      &.#{iv.$class-prefix}is-active {
+        position: relative;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Carousel list variant (multiple visible items)
+.#{iv.$class-prefix}carousel-list {
+  .#{iv.$class-prefix}carousel-container {
+    overflow: visible;
+  }
+
+  .#{iv.$class-prefix}carousel-slides {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .#{iv.$class-prefix}carousel-item {
+    flex: 0 0 auto;
+    width: auto;
+    position: relative;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Responsive adjustments
+@media screen and (max-width: 768px) {
+  .#{iv.$class-prefix}carousel {
+    .#{iv.$class-prefix}carousel-arrow {
+      width: cv.getVar("carousel-arrow-size-mobile");
+      height: cv.getVar("carousel-arrow-size-mobile");
+
+      svg {
+        width: cv.getVar("carousel-arrow-icon-size-mobile");
+        height: cv.getVar("carousel-arrow-icon-size-mobile");
+      }
+
+      .#{iv.$class-prefix}icon {
+        font-size: 1rem;
+
+        &.#{iv.$class-prefix}is-small {
+          font-size: 0.75rem;
+        }
+
+        &.#{iv.$class-prefix}is-large {
+          font-size: 1.25rem;
+        }
+      }
+
+      &.#{iv.$class-prefix}is-prev {
+        left: cv.getVar("carousel-arrow-offset-mobile");
+      }
+
+      &.#{iv.$class-prefix}is-next {
+        right: cv.getVar("carousel-arrow-offset-mobile");
+      }
+    }
+
+    .#{iv.$class-prefix}carousel-indicator {
+      gap: cv.getVar("carousel-indicator-gap-mobile");
+    }
+
+    .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-size-mobile");
+      height: cv.getVar("carousel-indicator-size-mobile");
+    }
+
+    &.#{iv.$class-prefix}is-indicator-lines .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-line-width-mobile");
+      height: cv.getVar("carousel-indicator-line-height-mobile");
+    }
+
+    &.#{iv.$class-prefix}is-indicator-bars .#{iv.$class-prefix}indicator-item {
+      width: cv.getVar("carousel-indicator-bar-width-mobile");
+      height: cv.getVar("carousel-indicator-bar-height-mobile");
+    }
+  }
+}