/*
 * Copyright (c) 2020 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

.eclipsefdn-user-display-circle {
  .img, .icon-backdrop {
    border-radius: 50%;
    border: 1px solid @brand-primary;
  }

  .icon-backdrop {
    & {
      width: 100%;
      position: relative;
      display: inline-block;
      
      background-color: #fff;
    }
    // Variable width font based on view width. Cap at max container width to ensure growth doesn't continue
    i {
      & {
        font-size: 25vw;
        padding-top: 18%;
      }
      @media(min-width: 768px) {
        & {
          font-size: 12vw;
        }
      }
      @media(min-width: 1200px) {
        & {
          font-size: 9em;
        }
      }
    }
    i:before {
      color: @brand-primary;
    }
    .icon-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .ratio {
      margin-top: 100%;
    }
  }
}