// Copyright (c) .NET Foundation and contributors. All rights reserved.
// Licensed under the MIT license. See LICENSE file in the project root for full license information.


@charset "utf-8";
@import "./constants";

@keyframes textBlink {
  from {
    color: $white;
  }

  to {
    color: $text;
  }
}

@keyframes busy-spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

@mixin action-button {
  font-size: 20px;
  border: none;
  margin: 2px;
  padding: 4px 12px;
  color: $white;
  background-color: $dotnet-purple;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

button.run,
ul.index > li {
  @include action-button;

  &:hover {
    background-color: lighten($dotnet-purple, 17.5%);
  }

  &:disabled {
    background-color: lighten($dotnet-purple, 25.5%);
  }

  svg {
    transform-origin: 50% 50%;
    height: 16px;
    display: inline-flex;
    fill: $white;
  }
}

ul.index > li > a {
  display: block;
  color: $white;
  padding: 4px 12px;
  text-decoration: none;
}

.code-container-inline button.run {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 4px;
  svg {
    fill: $white;
    path {
      opacity: 1;
    }

    g.spinner {
      opacity: 0;
    }
  }
}

button.run {
  svg {
    fill: $white;
    path {
      opacity: 1;
    }

    g.spinner {
      opacity: 0;
    }
  }
}

@mixin action-button-busy {
  svg {
    path {
      opacity: 0;
    }

    g.spinner {
      opacity: 1;
      g {
        animation: busy-spinning 6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 12px 12px;
      }

      g:nth-child(1) {
        animation-delay: -1s;
      }

      g:nth-child(2) {
        animation-delay: -1.2s;
      }

      g:nth-child(3) {
        animation-delay: -1.4s;
      }

      g:nth-child(4) {
        animation-delay: -1.6s;
      }

      g:nth-child(5) {
        animation-delay: -1.8s;
      }

      g:nth-child(6) {
        animation-delay: -2s;
      }

      g:nth-child(7) {
        animation-delay: -2.2s;
      }

      g:nth-child(8) {
        animation-delay: -2.4s;
      }
    }
  }
}

button.busy,
.code-container-inline button.busy {
  @include action-button-busy;
}
