@layer reset, layout, components;

@layer reset {
  body {
    margin: 0;
    overflow: hidden;
  }
}

@layer layout {
  #controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    display: flex;
    align-items: center;
    gap: 15px;
  }
}

@layer components {
  #controls {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 12px 20px;
    border-radius: 15px;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    opacity: 0.3;
    transition: opacity 0.3s ease;

    input[type="range"] {
      cursor: pointer;
    }

    &:hover {
      opacity: 1;
    }

    #play-pause-btn {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;

      svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
      }
    }
    
    #time-display {
      font-size: 14px;
      min-width: 110px;
      text-align: center;
    }
    
    #file-label {
      background-color: #337ab7;
      color: white;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: pointer;
    }

    #file-input {
      display: none;
    }
  }
}