import styled from 'styled-components';

export const PaginationWrapper = styled.div`
	.parent{
    color: #757575;
      z-index: 1;
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 3px;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
      border-top: 2px solid rgba(0, 0, 0, 0.1);
      .center{
        -webkit-box-flex: 1.5;
        flex: 1.5;
        text-align: center;
        margin-bottom: 0;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        justify-content: space-around;
        .pageInfo{
          display : flex;
          justify-self: flex-start;
          align-items: center;
          line-height: 30px;
          margin: 3px 10px;
          white-space: nowrap;
          .pageNo{
            width: 70px;
            text-align: center;
            border: 1px solid rgba(0,0,0,0.1);
            background: #fff;
            font-size: inherit;
            border-radius: 3px;
            font-weight: normal;
            height: 37px
            outline: none;
            margin: 0px 5px;
          }
        }
      }
      .button-wrap{
        -webkit-box-flex: 1;
        flex: 1;
        text-align: center;
      }
      .button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 3px;
        padding: 6px;
        font-size: 1em;
        color: rgba(0, 0, 0, 0.6);
        background: rgba(0, 0, 0, 0.1);
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        cursor: pointer;
        outline: none;
      }
      .button[disabled] {
        opacity: .5;
        cursor: default;
      }
      .button:hover:enabled {
        color : white;
        background: rgba(0, 0, 0, 0.4);
      }
	}
`;