pomodoro-button {
  align-items: center;
  display: inline-block;
  max-height: 40px;
  position: relative;

  @include ng-pop-in-popout;

  .timer-btn {
    position: relative;
    overflow: visible;

    @media(max-width: $layout-xs) {
      transform: scale(1);
    }

    ng-md-icon {
      margin-top: -10px;

      @include ng-pop-in;
      &.ng-leave {
        transition: none;
        display: none !important;
      }
    }

    // fix weird flickering
    ng-md-icon + ng-md-icon {
      display: none;
    }
  }

  md-fab-trigger {
    position: relative;
  }

  .PLAY .timer-btn-text {
    color: #ffffff;
  }

  .timer-btn-text {
    transition: $transition-standard;
    font-size: 15px;
    line-height: 1;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    color: #333333;
    background: inherit;
    margin-bottom: -4px;
    padding: 1px 3px;
    z-index: 10;
  }

  md-fab-actions {

    .md-fab-action-item {
      margin-top: 5px;
    }
  }
}