@import '~@angular/material/theming';

.header {
  display: block;
  margin-bottom: 1rem;
  font-weight: 400;
  margin-top: 1rem;
  font-size: 14px;
}

@mixin changes-theme($theme) {
  .scroll-container {
    max-height: 50vh;
    overflow-y: scroll;

    .item {
      box-sizing: border-box;
      padding: .5rem;
      margin: .25rem 0;
      border-radius: .5rem;
      display: flex;
      flex-direction: column;

      .editor {
        color: var(--grey);
        font-size: 12px;
        align-self: flex-end;
      }

      .seq {
        color: var(--grey);
        font-size: 12px;
        align-self: flex-end;
      }

      .desc {
        overflow-x: auto;
        font-size: 14px;
      }
      /* stylelint-disable */
      $primary: map-get($theme, primary);
      $primary-dark: mat-color($primary, A800);
      /* stylelint-enable */

      &.change-item-back {
        background-color: rgba($primary-dark, .93);
        transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
      }
    }

    .sp-wrapper {
      padding: .5rem;
      display: flex;
      justify-content: center;
    }

    .end-container {
      font-size: 12px;
      color: var(--grey);
    }
  }
}