@braineet/ui/dist/esm/components/carousel/styles.js

Braineet design system

/* stylelint-disable */
import styled, { css } from 'styled-components';
import Box from '../box';
import Button from '../button';
import Heading from '../heading';
import Pane from '../pane';
export var StyledButton = styled(Button).withConfig({
  displayName: "styles__StyledButton",
  componentId: "sc-suyqci-0"
})(["", " ", ""], function (props) {
  return props.$position === 'left' && css(["margin-right:", ";"], props.theme.spaces.md);
}, function (props) {
  return props.disable && Disabled;
});
var Disabled = function Disabled() {
  return css(["opacity:0.24;cursor:not-allowed;box-shadow:none;span,&:hover,&:not([disabled]):hover,&:not([disabled]):focus,&:not([disabled]):active,&:not([disabled]):focus:active{background-color:transparent;}"]);
};
export var StyledSwiper = styled(Box).withConfig({
  displayName: "styles__StyledSwiper",
  componentId: "sc-suyqci-1"
})(["-ms-overflow-style:none;scroll-behavior:smooth;overflow:hidden;overflow:-moz-scrollbars-none;::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
export var StyledWrapper = styled(Box).withConfig({
  displayName: "styles__StyledWrapper",
  componentId: "sc-suyqci-2"
})(["-ms-overflow-style:none;scroll-behavior:smooth;overflow:-moz-scrollbars-none;display:flex;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-webkit-scroll-snap-coordinate:0% 0%;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;::-webkit-scrollbar{display:none;}scrollbar-width:none;"]);
export var StyledChild = styled(Box).withConfig({
  displayName: "styles__StyledChild",
  componentId: "sc-suyqci-3"
})(["scroll-snap-align:start;"]);
export var StyledTextTitle = styled(Heading).withConfig({
  displayName: "styles__StyledTextTitle",
  componentId: "sc-suyqci-4"
})([""]);
export var StyledBoxArrows = styled(Pane).withConfig({
  displayName: "styles__StyledBoxArrows",
  componentId: "sc-suyqci-5"
})(["display:flex;align-items:center;background-color:white;border-radius:", ";padding:0 0 0 ", ";margin-right:", ";"], function (props) {
  return props.theme.borderRadius.sm;
}, function (props) {
  return props.theme.spaces.md;
}, function (props) {
  return props.theme.spaces.xl;
});
export var StyledBoxTopSide = styled(Box).withConfig({
  displayName: "styles__StyledBoxTopSide",
  componentId: "sc-suyqci-6"
})(["display:flex;justify-content:space-between;align-items:center;", ""], '' /* padding-left: ${props => props.theme.spaces.xl}; */);
export var StyledBoxNumbers = styled(Box).withConfig({
  displayName: "styles__StyledBoxNumbers",
  componentId: "sc-suyqci-7"
})(["display:flex;align-items:center;margin-right:", ";"], function (props) {
  return props.theme.spaces.xxxl;
});
export var StyledDivider = styled(Box).withConfig({
  displayName: "styles__StyledDivider",
  componentId: "sc-suyqci-8"
})(["width:", ";height:", ";background-color:", ";margin:0 ", ";"], function (props) {
  return props.theme.utils.fluid(10);
}, function (props) {
  return props.theme.utils.fluid(2);
}, function (props) {
  return props.theme.utils.lighten('black', 0.2);
}, function (props) {
  return props.theme.spaces.sm;
});
export var StyledNumber = styled(Heading).withConfig({
  displayName: "styles__StyledNumber",
  componentId: "sc-suyqci-9"
})(["", " width:", ";text-align:center;"], function (props) {
  return props.isChanging && css(["color:", ";"], props.theme.colors.brand);
}, function (props) {
  return props.theme.spaces.xl;
});