// Generated with util/create-component.js
@import '../../variables';
@import '../../typography.scss';

@import '../../Button/Button.scss';

$color-spinner-button: rgb(3, 192, 100);
$color-play: rgb(0, 138, 71);
$color-stop: #b71c1c;
$color-pause: #ff9900;
$color-default: #1ea7fd;

.sr-header {
  border-bottom: solid 1px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;

  .grid-item {
    padding-right: 0;

    &.left {
      flex-grow: 2;
      align-content: center;
      display: flex;
      align-items: center;
      flex-flow: row;
      padding-left: 1rem;
      padding-top: 0;

      h1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: initial;
        margin: 0;
        color: grey;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 14px;
        width: fit-content;

        &.md-title {
          padding-top: 18px;
          padding-left: 11px;
          margin: 0;
          font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
          font-size: 20px;
          text-transform: uppercase;
          font-weight: 400;
          padding: 0;
        }
      }
      .icon-status {
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
        padding: 4px 6px 4px 6px;
        border-radius: 2px;
        background-color: rgba($color-default, 1);
        color: white;
        line-height: initial;

        &.play {
          padding: 4px 5px 4px 7px;
          background-color: rgba($color-play, 1);
        }

        &.pause {
          background-color: rgba($color-pause, 1);
        }

        &.stop {
          background-color: rgba($color-stop, 1);
        }
      }
    }

    &.right {
      padding: 0.6rem;
      padding-right: 0;
    }

    &:last-child {
      padding-right: 1rem;
    }

    .spinner-button-style {
      position: absolute;
      margin-left: 100px;
      color: $color-spinner-button;
    }
  }
}