import styled, { css } from 'styled-components';
import Icon from '../Icon';
import MenuButton from '../MenuButton';
import { defaultThemeProp } from '../../theme';
import { StyledTab } from './Tab';
export const StyledTabs = styled.div(({ type, theme, hasScrollBar, level }) => {
    return css `
      position: relative;

      ${type === 'horizontal' &&
        css `
        height: max-content;
        overflow: auto;
        ${hasScrollBar
            ? css `
              max-width: calc(
                100% - ${theme.base['hit-area']['mouse-min']} -
                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
              );

              &:not(:hover, :focus, :active, :has(:focus-visible)) {
                ::-webkit-scrollbar-thumb {
                  box-shadow: none;
                }

                ::-webkit-scrollbar-track {
                  background-color: transparent;
                }
              }

              ${StyledTab} {
                border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
                height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);

                @media (pointer: coarse) {
                  height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);
                }

                &:disabled {
                  opacity: 1;
                  > * {
                    opacity: ${theme.base['disabled-opacity']};
                  }
                }
              }
            `
            : css `
              border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
              ${level > 1 &&
                css `
                background-color: ${theme.base.palette['secondary-background']};
                border: 0.0625rem solid ${theme.base.palette['border-line']};
                border-block-end: none;
                border-start-start-radius: calc(0.5rem * 0.5);
                border-start-end-radius: calc(0.5rem * 0.5);
              `}
            `}
      `}
      &:has(:focus-visible) {
        box-shadow: ${type === 'vertical'
        ? theme.base.shadow['focus-group-inset']
        : theme.base.shadow['focus-group']};
      }
    `;
});
StyledTabs.defaultProps = defaultThemeProp;
export const StyledAllTabsButton = styled(MenuButton) `
  display: inline-flex;
  align-items: center;
  justify-content: center;
`;
StyledAllTabsButton.defaultProps = defaultThemeProp;
export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
    color: ${theme.base.palette.urgent};
  `);
StyledErrorIcon.defaultProps = defaultThemeProp;
export const StylesAllTabsButtonWrapper = styled.div(({ theme }) => css `
    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
    border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);

    @media (pointer: coarse) {
      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);
    }
  `);
StylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;
export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
    ${level > 1 &&
    css `
      background-color: ${theme.base.palette['secondary-background']};
      border-inline: 0.0625rem solid ${theme.base.palette['border-line']};
      border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
      border-start-start-radius: calc(0.5rem * 0.5);
      border-start-end-radius: calc(0.5rem * 0.5);

      ${StylesAllTabsButtonWrapper}, ${StyledTab} {
        border-block-end: none;
        border-inline-end: none;
      }
    `}
  `);
StyledAllTabsWrapper.defaultProps = defaultThemeProp;
export const StyledSeparator = styled.span(({ theme, transparent }) => css `
    align-self: center;
    height: 1em;
    min-width: 0.0625rem;
    background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};
  `);
StyledSeparator.defaultProps = defaultThemeProp;
//# sourceMappingURL=Tabs.styles.js.map