import styled, { css } from 'styled-components';
import Icon from '../Icon';
import MenuButton from '../MenuButton';
import { defaultThemeProp } from '../../theme';
import { StyledTab } from './Tab';
export const StylesAllTabsButtonWrapper = styled.div(({ theme }) => css `
    border-block-end: ${theme.components.tabs.detached
    ? 'none'
    : `0.0625rem solid ${theme.base.palette['border-line']}`};
    border-inline-end: ${theme.components.tabs.detached
    ? 'none'
    : `0.0625rem solid ${theme.base.palette['border-line']}`};
    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);

    ${theme.components.tabs.detached &&
    css `
      padding: 0;
    `};

    @media (pointer: coarse) {
      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);
    }
  `);
StylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;
export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
    return css `
    position: relative;

    ${theme.components.tabs.detached &&
        css `
      ${StyledTab} + ${StyledTab} {
        margin-inline-start: calc(2 * ${theme.base.spacing});
      }
      &[aria-orientation='horizontal'] {
        background-color: ${theme.base.palette['secondary-background']};
        border-radius: var(--border-radius, ${theme.base['border-radius']});
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        > ${StyledTab} {
          background-color: ${theme.base.palette['secondary-background']};
          &[aria-selected='true'] {
            background-color: ${theme.base.palette['primary-background']};
          }
          ${!hasScrollBar &&
            css `
            :first-child {
              border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});
            }
          `}
          ${hasScrollBar &&
            css `
            :last-child {
              border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});
            }
          `}
        }
      }
    `}

    &[aria-orientation='horizontal'] {
      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 `}
            );

            ${StyledTab} {
              border-block-end: ${theme.components.tabs.detached
            ? 'none'
            : `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: ${theme.components.tabs.detached
            ? 'none'
            : `0.0625rem solid ${theme.base.palette['border-line']}`};
            ${level > 1 &&
            css `
              background-color: ${theme.base.palette['secondary-background']};
              border: ${theme.components.tabs.detached
                ? 'none'
                : `0.0625rem solid ${theme.base.palette['border-line']}`};
              border-block-end: none;
              border-radius: 0;
              border-start-start-radius: ${theme.components.tabs.detached
                ? `var(--border-radius, ${theme.base['border-radius']})`
                : 'calc(0.5rem * 0.5)'};
              border-start-end-radius: ${theme.components.tabs.detached
                ? `var(--border-radius, ${theme.base['border-radius']})`
                : 'calc(0.5rem * 0.5)'};
            `}
          `}
      ${theme.components.tabs.detached &&
        css `
        padding-block: 0;
        border: 0.0625rem solid ${theme.base.palette['border-line']};
        border-block-end: none;

        ${StylesAllTabsButtonWrapper} + & {
          padding-inline-start: calc(0.25 * ${theme.base.spacing});
        }
        ${StyledTab} + ${StyledTab} {
          margin-inline-start: 0;
        }
        ${hasScrollBar &&
            css `
          border: none;
          border-inline-start: none;
          max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});

          @media (pointer: coarse) {
            max-width: calc(100% - ${theme.base['hit-area']['finger-min']});
          }
        `}
      `}
    }

    &:has(:focus-visible) {
      &[aria-orientation='vertical'] {
        box-shadow: ${theme.base.shadow['focus-group-inset']};
      }

      &[aria-orientation='horizontal'] {
        box-shadow: ${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 StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
    ${level > 1 &&
    css `
      background-color: ${theme.base.palette['secondary-background']};
      ${!theme.components.tabs.detached &&
        css `
        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;
      }
    `}
    ${theme.components.tabs.detached &&
    css `
      background-color: ${theme.base.palette['primary-background']};
      border: 0.0625rem solid ${theme.base.palette['border-line']};
      border-block-end: none;
      ${StylesAllTabsButtonWrapper} {
        border-radius: 0;
      }
    `}
  `);
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