baseui/button-dock/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledRoot = exports.StyledActionSubContainer = exports.StyledActionContainer = void 0;
var _index = require("../styles/index");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledRoot = exports.StyledRoot = (0, _index.styled)('div', ({
  $theme
}) => ({
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  gap: $theme.sizing.scale300,
  width: '100%',
  paddingTop: $theme.sizing.scale600,
  paddingRight: $theme.sizing.scale600,
  paddingBottom: $theme.sizing.scale600,
  paddingLeft: $theme.sizing.scale600,
  backgroundColor: $theme.colors.backgroundPrimary,
  container: 'root / inline-size'
}));
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledActionContainer = exports.StyledActionContainer = (0, _index.styled)('div', ({
  $theme
}) => ({
  display: 'flex',
  flexDirection: 'column',
  gap: $theme.sizing.scale300,
  '@container root (inline-size > 600px)': {
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
}));
StyledActionContainer.displayName = "StyledActionContainer";
StyledActionContainer.displayName = 'StyledActionContainer';
const StyledActionSubContainer = exports.StyledActionSubContainer = (0, _index.styled)('div', ({
  $reverseWhenWide,
  $theme
}) => ({
  display: 'flex',
  flexDirection: 'column',
  gap: $theme.sizing.scale300,
  '@container root (inline-size > 600px)': {
    flexDirection: $reverseWhenWide ? 'row-reverse' : 'row'
  }
}));
StyledActionSubContainer.displayName = "StyledActionSubContainer";
StyledActionSubContainer.displayName = 'StyledActionSubContainer';