@import '../../Styles/styles.scss';

RaceResultsHeader {
  width: 100%;
  height: 256px;
  margin: 64px;
  padding: 32px;
  
  font-family: $font-secondary;
  
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4));
  
  .placement-container {
    align-items: center;
    z-index: 2;
    
    > label {
      position: absolute;
      font-size: 96px;
      font-style: italic;
      color: $pk-white;
      margin-left: 72px;
    }
  }
  
  .results-info {
    flex-direction: column;
  }
  
  .results-title {
    background-color: $pk-white;
    height: 96px;
    align-items: center;
    justify-content: center;
    transform: skewX(-32deg);
    width: 600px;
    margin-left: -60px;
    
    > label {
      color: $pk-black;
      font-size: 64px;
      transform: skewX(32deg);
    }
  }
  
  .course-name {
    background-color: $pk-black;
    height: 96px;
    align-items: center;
    justify-content: center;
    transform: skewX(-32deg);
    margin-left: -100px;
    width: 580px;
    
    > label {
      color: $pk-white;
      font-size: 32px;
      transform: skewX(32deg);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}