/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.wheel-container {
  position: relative;
  width: 90vh;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .spinBtn {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #676767;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #333;
    letter-spacing: .1em;
    user-select: none;
  }
  
  .spinBtn::before {
    content: '';
    position: absolute;
    top: -28px;
    width: 20px;
    height: 30px;
    background: #676767;
    clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
  }
  
  .wheel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 0.5rem #676767;
    transition: transform 5s ease-in-out;
    
    .number {
      position: absolute;
      width: 50%;
      height: 50%;
      background: #fff;
      transform-origin: bottom right;
      transform: rotate(calc(45deg * var(--i)));
      clip-path: polygon(0 0, 60% 0, 100% 100%, 0 57%);
      border: thin solid #676767;
      display: flex;
      justify-content: center;
      align-items: center;
      
      span {
        position: relative;
        transform: rotate(45deg);
        font-size: 3vh;
      }
    }
  }
}