/* Copyright 2017-2019 @polkadot/app-explorer authors & contributors
/* This software may be modified and distributed under the terms
/* of the Apache-2.0 license. See the LICENSE file for details. */

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.explorer--BlockHeader {
  animation: fadein 1.5s;

  > div {
    padding: 0.5em;
    overflow: hidden;
  }

  .header {
    color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;

    > div {
      display: inline-block;
      font-size: 2.75rem;
      font-weight: 100;
      line-height: 1;
      margin-bottom: 0.25rem;
      vertical-align: middle;
      white-space: nowrap;
    }

    .hash {
      font-size: 1.5em;
    }
  }

  .hash {
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .number {
    align-items: center;
    box-sizing: border-box;
  }

  .details {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;

    .contains {
      border: 0;
      opacity: 0.75;

      div {
        margin-bottom: 0.125em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        div {
          display: inline-block;
          padding: 0 0.25em;
          vertical-align: middle;

          &.type {
            opacity: 0.75;
            text-align: right;
            width: 10em;
          }
        }
      }
    }
  }
}