import { formControlClasses } from '@mui/material/FormControl';
import { inputBaseClasses } from '@mui/material/InputBase';
import { styled } from '../styled';
export const InputsWrapper = styled.fieldset `
  display: grid;
  grid-template-columns: ${({ $columnsTemplate }) => $columnsTemplate};

  margin-inline: 0;
  padding: 0;

  border: unset;

  & .${formControlClasses.root} {
    width: 100%;

    .${inputBaseClasses.root} {
      position: relative;
      z-index: 2;

      border-radius: 0;

      &.${inputBaseClasses.focused} {
        z-index: 4;
      }
    }
  }

  /* Скругления только крайних инпутов */
  & > :first-child .${inputBaseClasses.root} {
    border-top-left-radius: ${({ theme }) => theme.shape.medium};
    border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
    
    &.${inputBaseClasses.disabled} {
      z-index: 1;

      &::after {
        content: '';

        position: absolute;
        right: 0;

        width: 1px;
        height: 100%;

        background-color: ${({ theme }) => theme.palette.grey[500]};
      }
    }
  }

  & > :last-child .${inputBaseClasses.root} {
    border-top-right-radius: ${({ theme }) => theme.shape.medium};
    border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
  }

  & > :not(:first-child) .${inputBaseClasses.root} {
    &.${inputBaseClasses.disabled} {
      z-index: 1;
 
    
    &::after {
        content: '';
  
        position: absolute;
        left: 0;
  
        width: 1px;
        height: 100%;
  
        background-color: ${({ theme }) => theme.palette.grey[500]};
      }
    }
  
  }
  
  & > :not(:last-child) .${inputBaseClasses.root} {
    width: auto;
    margin-right: -2px;
    
    &:hover {
      z-index: 3;
      
      &.${inputBaseClasses.disabled} {
        z-index: 1;
      }
    }
  }

  
`;
