@import 'orchestra/static/orchestra/common/css/common';

.timer {
  $timer-width: 300px;

  font-size: 18px;

  .popover-toggle {
    line-height: 52px;
    cursor: pointer;
    color: white;
    font-size: 1.4em;
  }

  .start-timer.btn {
    color: white;
    background-color: $light-green;
    display: inline-block;
  }

  .time-display {
    font-size: 28px;
    line-height: initial;
    vertical-align: top;
    text-align: left;
    font-family: "Lucida Console", Monaco, monospace;
  }

  .description {
    input {
      width: 100%;
    }
  }

  .past-entries {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid $light-gray;
    h1 {
      font-size: 0.8em;
      margin-bottom: 10px;
    }
  }

  a {
    cursor: pointer;
  }

  .popover {
    width: $timer-width;
    max-width: none;
    .timer-popover {
      padding: 0;
      .ui-select-bootstrap > .ui-select-choices {
        width: auto;
      }

      .row {
        margin: 10px 0;
      }

      .tgl + .tgl-btn {
        display: inline-block;
        margin-bottom: 0;
      }
    }

    // Taken from http://codepen.io/mallendeo/pen/eLIiG
    .tgl {
      display: none;
      // add default box-sizing for this scope
      &, &:after, &:before,
      & *, & *:after, & *:before,
      & + .tgl-btn{
        box-sizing: border-box;
        &::selection{
          background: none;
        }
      }
      + .tgl-btn{
        outline: 0;
        display: block;
        width: 4em;
        height: 2em;
        position: relative;
        cursor: pointer;
         user-select: none;
        &:after, &:before{
          position: relative;
          display: block;
          content: "";
          width: 50%;
          height: 100%;
        }
        &:after{
          left: 0;
        }
        &:before{
          display: none;
        }
      }
      &:checked{
        + .tgl-btn{
          &:after{
            left: 50%;
          }
        }
      }
    }
    .tgl-ios{
      + .tgl-btn{
        background: #fbfbfb;
        border-radius: 2em;
        padding: 2px;
        transition: all .4s ease;
        border: 1px solid #e8eae9;
        &:after{
          border-radius: 2em;
          background: #fbfbfb;
          transition:
            left .3s cubic-bezier(
              0.175, 0.885, 0.320, 1.275
            ),
            padding .3s ease, margin .3s ease;
          box-shadow:
            0 0 0 1px rgba(0,0,0,.1),
            0 4px 0 rgba(0,0,0,.08);
        }
        &:hover:after {
          will-change: padding;
        }
        &:active{
          box-shadow: inset 0 0 0 2em #e8eae9;
          &:after{
            padding-right: .8em;
          }
        }
      }
      &:checked{
        + .tgl-btn{
          background: #86d993;
          &:active{
            box-shadow: none;
            &:after{
              margin-left: -.8em;
            }
          }
        }
      }
    }
  }
}
