import styled from "styled-components";

const WrapperBtnGroup = styled.div`
  white-space:nowrap;
  display: inline-block;
  line-height:1;
  vertical-align: middle;
  font-size:0;
  .btnItem{
    position: relative;
    display: inline-block;
    outline:none;
    span.btnItem__inner{
      font-size:13px;
      line-height: 1;
      white-space: nowrap;
      vertical-align: middle;
      background: #fff;
      border: 1px solid #dcdfe6;
      font-weight: 500;
      border-left: 0;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      cursor: pointer;
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      border-radius: 0;
      position: relative;
      display: inline-block;
      padding: 9px 15px;
      user-select:none;
    }
    :first-child{
      .btnItem__inner{
        border-left-width: 1px !important;
        border-left-style:solid !important;
        border-left-color: #dcdfe6;
        box-shadow: none;
        border-radius:2px 0 0 2px;
      }
    }
    :last-child{
      .btnItem__inner{
        border-radius:0 2px 2px 0;
      }
    }
    .btnItem__active{
      color: #1f6eef !important;
      border-color: #1f6eef !important;
      background: rgba(196,227,255,.4) !important;
      font-size: 13px !important;
      box-shadow:-1px 0 0 0 #1f6eef;
    }
    .btnItem__disabled{
      color: #c0c4cc !important;
      background-image: none !important;
      background-color: #fff !important;
      border-color: #ebeef5 !important;
    }
  }
`

export {
  WrapperBtnGroup
}