// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/mixins';
@import 'src/styles/themes';

$rotateTime: 2s;
// min size allocated for the refresh time according the current design
$minWidthTime: 66*$grid-size;
$minWidthEmptyTime:  33*$grid-size;
$btn-icon-size: 4*$grid-size;

.last-updated-container {
  display: flex;
  justify-content: flex-end;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 0;

  .btn.refresh-btn {
    @include rem-fallback(padding, 0px, 5px);
    @include rem-fallback(min-width, 0px);

    &:hover { background: none !important; }

    .btn-icon { @include square-px-rem($grid-size*4); }

    &:focus { outline: 0px; }

    &.refreshing {
      -webkit-animation: spin $rotateTime linear infinite;
      -moz-animation: spin $rotateTime linear infinite;
      animation: spin $rotateTime linear infinite;
    }
  }

  .time {
    min-width: $minWidthTime;
  }

  .empty-time{
    min-width: $minWidthEmptyTime;
  }

  @include themify($themes) {
    border-left: 1px solid themed('color-border-rest');

    .time {
      color: themed('colorContentText');

      .refresh-text { color: themed('colorContentTextDim'); }
    }

    .btn.refresh-btn {
      background: none;

      &.refreshing .btn-icon svg { fill: themed('colorContentText'); }
    }
  }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
