import styled from 'styled-components'
import {boxDialerWidjetPosition} from "../../lib/boxDialerWidjetPosition"

const SettingMainStyle = styled.div`
  box-shadow: 0 0  20px #00000047;
  background-color: #a6bdf438;
  border-radius: 20px;
  margin: 0;
  box-sizing: border-box;
  width: 230px;
  height: 300px;
  position: fixed;
  padding: 3px;
  transition: 0.2s !important;
  z-index: 9999;
  backdrop-filter: blur(10px);
  ${({ hiddenValue, position, variant }) =>
          hiddenValue
                  ? boxDialerWidjetPosition[variant][position].numpad.hidden
                  : boxDialerWidjetPosition[variant][position].numpad.seen}
  bottom: 400px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 2px;
`
SettingMainStyle.LeftMenu = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0;
  box-sizing: border-box;
  .menuItem {
    height: 34px;
    width: 34px;
    border: 1px solid #9c9c9c80;
    padding: 2px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .leftIcons {
    color: #00000080;
  }

  .backgroundFilter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #0000004d;
    z-index: 1;
    border-top-left-radius: 9px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 2px;
  }

  .active {
    //.leftIcons{
    //  color: #fff;
    //}
    .backgroundFilter {
      width: 100%;
      animation: .2s ease-in both running backFilter;
    }
  }
  @keyframes backFilter {
    from{
      height: 0;
    }
    to{
      height: 100%;
    }
  }
  height: 100%;
`
SettingMainStyle.RightSelectInfo = styled.div`
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  justify-content: center; 
  padding: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 10px;
  ::-webkit-scrollbar {
    height: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #fff0;
    width: 0;
    
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #abaaaa;
    border-radius: 10px;
    width: 0;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 0;
    
  }
  
`
SettingMainStyle.RightSelectInfoOneBlock = styled.div`
  height: 285px;
  border-top-left-radius: 3px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 10px;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #fff0;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #abaaaa;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
`

export default SettingMainStyle
