@kaspersky/components/src/segmented-button/segmentedButtonCss.js

Kaspersky Design System UI Kit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.segmentedButtonItemCss = exports.segmentedButtonCss = void 0;
var _styledComponents = require("styled-components");
var _getFromProps = require("../../helpers/getFromProps.js");
var _tokens = require("../../design-system/tokens/index.js");
var _variables = require("../../design-system/theme/themes/variables.js");
const fromProps = (0, _getFromProps.getFromProps)();
const textSizes = (0, _tokens.getTextSizes)(_tokens.TextTypes.BTR3);
const segmentedButtonCss = exports.segmentedButtonCss = (0, _styledComponents.css)(["display:flex;flex-direction:row;", ""], _ref => {
  let {
    type
  } = _ref;
  return type === 'checkbox' ? (0, _styledComponents.css)(["gap:4px;"]) : (0, _styledComponents.css)(["div:not(:first-child):not(:last-child){&,& label{border-radius:0;}}div:first-child{&,& label{border-top-right-radius:0;border-bottom-right-radius:0;}}div:last-child{&,& label{border-top-left-radius:0;border-bottom-left-radius:0;}}div:not(:last-child):not(.kl6-segmentedButton-item-checked){&,&:hover,&:active,&:focus-visible{border-right-color:transparent;}}div:not(:last-child){margin-right:-1px;}"]);
});
const segmentedButtonItemCss = exports.segmentedButtonItemCss = (0, _styledComponents.css)(["transition:all 0.3s ease;&,label{border-radius:8px;}font-family:", ";font-size:", ";line-height:", ";font-weight:", ";font-style:", ";letter-spacing:", ";background:", ";color:", ";border:1px solid ", ";&:hover{background:", ";}&:active{background:", ";}input:focus-visible + label{box-shadow:", ";}&.kl6-segmentedButton-item-checked:not(.kl6-segmentedButton-item-disabled){z-index:1;background:", ";color:", ";border:1px solid ", ";&:hover{background:", ";}&:active{background:", ";}}&.kl6-segmentedButton-item-disabled{&,&:hover,&:active,&:focus-visible{background:", ";color:", ";border:1px solid ", ";&.kl6-segmentedButton-item-checked{background:", ";border:none;}label{cursor:not-allowed;}}}", " .kl6-segmentedButton-item-additional{display:flex;flex-direction:column;justify-content:center;}input{position:absolute;opacity:0;}label{position:relative;display:flex;flex-direction:row;gap:", "px;width:100%;height:100%;padding:", ";cursor:pointer;transition:all 0.3s ease;}"], textSizes.fontFamily, textSizes.fontSize, textSizes.lineHeight, textSizes.fontWeight, textSizes.fontStyle, textSizes.letterSpacing, fromProps('unchecked.normal.background'), fromProps('unchecked.normal.color'), fromProps('unchecked.normal.border'), fromProps('unchecked.hover.background'), fromProps('unchecked.active.background'), fromProps('focus.boxShadow'), fromProps('checked.normal.background'), fromProps('checked.normal.color'), fromProps('checked.normal.border'), fromProps('checked.hover.background'), fromProps('checked.active.background'), fromProps('unchecked.normal.background'), fromProps('unchecked.disabled.color'), fromProps('unchecked.disabled.border'), fromProps('checked.disabled.background'), _ref2 => {
  let {
    type
  } = _ref2;
  return type === 'radio' && (0, _styledComponents.css)(["&:not(.kl6-segmentedButton-item-disabled) + .kl6-segmentedButton-item-disabled{&,&:hover,&:active,&:focus-visible{border-left-color:", ";}}"], fromProps('unchecked.normal.border'));
}, _variables.SPACES[2], fromProps('padding'));