//@import "./src/App";
@import '../../../src/App';
.time-picker-component{
  .clock {

    margin:2em auto;

    &:before{
      content: '';
      padding-top: 100%;
      width: 100%;
      display: block;

    }
    box-sizing: border-box;
    border-radius: 500px;
    @include font-body-large;
    position: relative;

    span{
      cursor: pointer;
      display: grid;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      padding-top: -3px;
    }
    .test {
      position: absolute;
      border-radius: 500px;
    }
    .selected{
      transition: all 0.5s ease-in;
    }
    .center{
      position: absolute;
      border-radius: 100px;
      width: .5em;
      height: .5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .hand{
      height: 0.1em;
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

    }
    .pointer{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      text-align: center;
      cursor: move;

    }

    .digits-clockFace {
      position: absolute;
      top: 0;
      left: 0;
    }
    .no-show-minutes{
      position: absolute;
      width: 1px;
      height: 1px;
      left: 9px;
      top:-9px ;

    }
  }
}