@import (reference) '../../essence-core/src/less/mixins.less';

//Font and color:
//Text: Roboto Regular 16sp,  #000 87%
//Title (optional): Roboto Regular 16sp, #000 54%
//Default bottom sheet background fill: #FFF
//Overlay shield fill: #000 20%

.e-bottom-sheet {
  position: fixed;
  left: 0;
  bottom: -500px;
  box-sizing: border-box;
  margin: 0;
  padding:  @e-unit (@e-unit*2);
  width: 100%;
  z-index: 99999;
  .transition(all 0.2s ease-in-out);

    & ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      & a {
        height: @e-unit*6;
        padding: 0;

        & i {
          float: left;
          line-height: @e-unit*6;
          color: inherit;
        }

        & span {
          display: inline-block;
          font-size: 16px;
          line-height: @e-unit*9;
          color: rgba(0 ,0 ,0 , 0.87);
        }
      }
    }

  &.animate {
    bottom: 0px;
  }

  &.big-icons {
    padding: 0 @e-unit*3 @e-unit*3 @e-unit*3;
    & li {
      float: left;
      width: 33%;
      padding-top: @e-unit*2;

      & a {
        display:table;
        height: inherit;
        text-align: center;

        & i {
          display: table-header-group;
          width: auto;
          margin: @e-unit 0;
          font-size: @e-unit*6;
        }

        & span {
          display: table-footer-group;
          width: 100%;
          line-height: @e-unit*2;
          font-size: @e-unit*1.75;
        }
      }
    }

    & li:nth-child(3n+1) a {
      float: left;
    }

    & li:nth-child(3n+2) a {
      margin:0 auto;
    }

    & li:nth-child(3n+3) a {
      float: right;
    }
  }
}