.contest-type-tag
.contest-tag
.contest-tag-rated
  font-size: rem($font-size-small)
  display: inline-block
  line-height: rem(22px)
  padding: rem(0 10px)
  vertical-align: middle
  border-radius: rem(12px)

  &:hover
    text-decoration: none
    color: #FFF !important

.contest-tag-rated
  background: orange
  color: #FFF

  .icon
    margin-right: rem(5px)

.contest-type-tag
  &, &:visited
    &, .supplementary &
      color: #FFF

  .icon
    margin-right: rem(5px)

for key, value in $contest-color
  .contest-type--{key} .contest-type-tag
    background: value

    &:hover
      background: lighten(value, 20%)

.contest-tag
  border: 1px solid $supplementary-border-color

  &:hover
    background: $primary-color
    border-color: $primary-color

.contest-problems
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
  text-align: left;
  box-sizing: border-box;
  font-variant-ligatures: none!important;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(1.5rem,1fr));
  justify-content: center;
  row-gap: 0.75rem;
  column-gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  
  > a
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: space-around;
    border-radius: 0.375rem;
    position: relative;
    transition: opacity 0.2s;
    color: grey;
    &.pass
      color: green;
      &:before
        background: green;
    &.fail
      color: red;
      &:before
        background: red;

    &:after
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      border: 2px solid currentColor;
      border-radius: 6px;
      opacity: 0.3;
    
    &.active:after
      border: 3px solid cyan;

    &:before
      opacity: 0.5;
    
    &.pass, &.fail
      &:not(:hover) .id
        display: none;
      
      &:hover .icon
        display: none;

  // .placeholder
  //   cursor: pointer;
  //   position: absolute;
  //   top: -0.375rem;
  //   right: -0.375rem;
  //   bottom: -0.375rem;
  //   left: -0.375rem;